Menu
I’m using redux and I’m not sure about how to organize my components, I think the best is to keep them in folders with the name of the main component as the name of the folder and all inner components inside:
components Common/ things like links, header titles, etc Form/ buttons, inputs, etc Player/ all small components forming the player index.js this one is the top layout component playBtn.js artistName.js songName.js Episode/ another component
Then, in the containers folder, I’ve one container per page, that are the only ones I'm actually connecting to Redux:
containers/ HomePageApp.js EpisodePageApp.js ...
and then the actions are one per each top component, instead of one per page, so in the page container that I connect to Redux I pass all the actions of the components used in that page. For example:
actions/ Player.js Episode.js ...
Am I doing this right? I haven't found much information about it googling, and the ones I've found I think they are limited to small projects.
Thanks!
895
At its core, Redux is really a fairly simple design pattern: all your "write" logic goes into a single function, and the only way to run that logic is to give Redux a plain object that describes something that has happened.
Containers are the primary components and the entry point from which we call child or generic components. Basically, container components are called smart components because each container component is connected to Redux and consumes the global data coming from the store.
The most common way to organize a React + Redux application, is to simply group your files by the type/function of that file. This is how a vast majority of React + Redux applications are organized. If you look at the Real-World example, from the Redux Github repository, you'll see that this is how it is organized.
What's the Container Pattern? The container pattern is a methodology in which instead of having all your global state in one global store, such as Redux, you divide that state into multiple chunks called containers.
In the official examples we have several top-level directories:
components for “dumb” React components unaware of Redux;containers for “smart” React components connected to Redux;actions for all action creators, where file name corresponds to part of the app;reducers for all reducers, where file name corresponds to state key;store for store initialization.This works well for small and mid-level size apps.
When you want to go more modular and group related functionality together, Ducks or other ways of grouping functionality by domain is a nice alternative way of structuring your Redux modules.
Ultimately choose whatever structure works best for you. There is no way Redux authors can know what’s convenient for you better than you do.
130
This is more a question about best practices / code style, and there is no clear answer. However, a very neat style was proposed in the React redux boilerplate project. It's very similar to what you currently have.
./react-redux-universal-hot-example ├── bin ├── src │ ├── components // eg. import { InfoBar } from '../components' │ │ ├── CounterButton │ │ ├── GithubButton │ │ ├── InfoBar │ │ ├── MiniInfoBar │ │ ├── SurveyForm │ │ ├── WidgetForm │ │ └── __tests__ │ ├── containers // more descriptive, used in official docs/examples... │ │ ├── About │ │ ├── App │ │ ├── Home │ │ ├── Login │ │ ├── LoginSuccess │ │ ├── NotFound │ │ ├── RequireLogin │ │ ├── Survey │ │ ├── Widgets │ │ └── __tests__ │ │ └── routes.js // routes defined in root │ ├── redux │ │ ├── init.js │ │ ├── middleware │ │ │ └── clientMiddleware.js // etc │ │ └── modules // (action/creator/reducer/selector bundles) │ │ ├── auth.js │ │ ├── counter.js │ │ ├── reducer.js │ │ ├── info.js │ │ └── widgets.js │ ├── server │ │ ├── middleware │ │ └── actions // proxy to separate REST api... │ └── utils │ │ ├── validationUtility.js // utility only (component-level definitions inside respective dir) │ └── createDevToolsWindow.js // etc ├── static │ ├── dist │ └── images └── webpack If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
