Transparent Redux

React and Redux are currently pretty high on the list of trendy front-end technologies, and for good reason.

While I'm not always a huge fan of the very webforms-esque approach of React itself, Redux is a great way forward for data management in your front-end apps.

However, I do have an issue with the way you're instructed to connect the two. The Redux documentation itself instructs the approach of:

/app
  /components
    JustAPresentationalComponent.jsx
    YourConnectedComponent.jsx
  /containers
    YourContainer.js
App.jsx

This way, inside your App.jsx you'll have to explicitly specify whether to import the Redux container or the React component:

// Assume there's the usual React + Redux wiring.
import YourComponent from './containers/YourConnectedComponent';

const App = () => (
  <YourComponent />
);

// Render the app.

I'm not a fan of this. My main issue is it requires changes to App.jsx if you decide to make a component use data from your Redux container, so whether a component is using Redux or not is not transparent to the consumer.

I'd like to suggest a better pattern would be:

/app
  /components
    JustAPresentationalComponent.jsx
    /YourConnectedComponent
      index.js
      YourConnectedComponent.jsx
App.jsx

Here, we wire the container in the index.js file, and App.jsx now looks like:

//...
import YourComponent from './components/YourConnectedComponent';

const App = () => (
  <YourComponent />
);

//...

This way, whether you are consuming a Redux container or a React component is transparent. This is important, as really you do not care about the implementation of a component when you consume it, and that is a large part of the ethos of component-based frameworks.

I think the main issue with my proposal is haing so many folders can be a little unwieldy, and getting access to actions could be fairly awkward if you're constantly having to write:

import { action } from '../../../actions';

This article doesn't really address the other part of the docs, that has some containers with inline React components. That seems so fundamentally wrong I think it deserves a separate essay, but it's also perfectly OK to do:

/app
  /components
    JustAPresentationalComponent.jsx
    /YourConnectedComponent
      index.js
      YourConnectedComponent.jsx
  /containers
    pureContainer.js
App.jsx

I'm sure everyone in the community will keep coming up with suggestions for how to better deal with organizing a project like this, so maybe I'll return to this topic in the future.