Should a container component *always* connect to Redux?

Question

I'm about to start a new React project and am trying to draw on my previous learnings to create some rules about how I structure the app.

Some things I believe to be true:

1. Redux holds the 'main' data for the whole application
2. Redux can hold UI state if it needs to be shared across the application (e.g. global modal windows that can be launched from anywhere)
3. Components can hold their own state with setState if that state doesn't need to be shared anywhere else in the app.
4. Stateless components should be used wherever possible
5. When I am creating a component that needs state from Redux, I will create FooContainer.js and FooComponent.js files - the Redux connect code will sit in the container.

There are large parts of the app that are UI heavy and have a lot of UI logic/state going on, but do not need any state from Redux.

I feel that with the liberal use of component-level state, I should be using more Container Components to compose smaller, stateless components. However, I see a lot of definitions of Container Components as "a HOC that connects to Redux"

Does it make sense to have a project that has many container components, where some are Redux connected and pass data from the store to their corresponding presentational component, and others that are not Redux connected but are just used to compose smaller components and manage local state?

If so, are there any recommended file structures, naming conventions etc to distinguish between the two?

Answer 1

A few thoughts.

First, it's important to understand that a "container component" is simply any component whose primary job is to fetch data from somewhere and pass that data to its children. This could mean making AJAX calls to retrieve data, or accessing Flux stores. That means that the wrapper components generated by React-Redux's connect function are "container components", because their only job is to extract data from the Redux store. It also means that components whose job is to manage UI state are also "container components". See Dan Abramov's original article on container and presentational components.

Second, it's entirely fun to use class components and functional components, as much or as little as you want. That's purely up to you.

Third, while you can define your "plain" components in one file, and "connect" them in another file, I personally tend to see that as unnecessary separation. Most of the time, a given React component will only be connected once, so it's perfectly reasonable to define the component and connect it in the same file.

You may want to read through some of the articles on Redux Architecture and Project Structure in my React/Redux links list for more information.