--- title: "Discussion on \"Tips For a Better Redux Architecture: Lessons for Enterprise Scale\" | Hashnode" description: "Discussion on \"Tips For a Better Redux Architecture: Lessons for Enterprise Scale\". So you've decided to try out Redux as your application state manager. Or perhaps you're investigating better options. Good for you. With Redux the good news is your application will enjoy a productivity boost from the simplicity of knowing precisely ..." url: "https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3" --- [Feed](https://hashnode.com/feed) / Discussion # [Tips For a Better Redux Architecture: Lessons for Enterprise Scale](https://hashnode.com/post/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale?utm_source=hashnode&utm_medium=feed) So you've decided to try out Redux as your application state manager. Or perhaps you're investigating better options. Good for you. With Redux the good news is your application will enjoy a productivity boost from the simplicity of knowing precisely ... Nov 21, 2016 · hashnode.com Read the article - [#reactjs](https://hashnode.com/tag/reactjs) - [#redux](https://hashnode.com/tag/redux) ## Written by [Michael Gilley](https://hashnode.com/@michaelgilley) @michaelgilley · Fort Collins, CO [View profile](https://hashnode.com/@michaelgilley) Frontend Engineer at Zapier Professional Javascript enthusiast, coder, and engineer for HP Enterprise. I work in Node, Angular, Vue, but mainly React with Redux. ## Responses 10 Markdown supported · ⌘↵ to post [Tony Brown](https://hashnode.com/@tbrown) [Oct 3, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/59d36aba1ad3f3c271afb1c7) Great write up. I worked for HPE as a contractor and we had the task of building a marketplace for HPE employees (data scientists). It was a huge application to say the least, we had data lakes, several databases. We used Docker swarms and had micro-services and followed "best practices". Redux was a great way to maintain application state, and helped get the MVP up and running in a few months, which IMO was amazing! [Michael Gilley](https://hashnode.com/@michaelgilley) [Oct 4, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/59d36aba1ad3f3c271afb1c7#reply-59d54dd68109ada408d1ee72) Agreed. The React/Redux architecture is one of the fastest code-to-production stacks out there because of its uniformity of design and narrowing of potential bug paths. I'm getting more into mobx-state-tree coupled with TS these days though. It's just as fast but cuts out some of the redundant boilerplate of redux modules. Cheers! [Tony Brown](https://hashnode.com/@tbrown) [Oct 5, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/59d36aba1ad3f3c271afb1c7#reply-59d614f6e7423662036729a3) I've looked into MobX as well. Have you tried Flow instead of TS? I find it cuts down on the boilerplate of TS and is more inline with the way I write JavaScript. Just a suggestion, we all have our preferences. [Hannah McCain](https://hashnode.com/@hjmccain) [Oct 2, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/59d280e858e316f730023c47) thanks for this post! can you point me in the direction of any literature that goes into more depth on the idea of only posting from components — no dispatch? i'd love to learn more. [Michael Gilley](https://hashnode.com/@michaelgilley) [Oct 4, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/59d280e858e316f730023c47#reply-59d54cc88109ada408d1ee5e) Yep, you'll want to check out the docs for react-redux here: [github.com/reactjs/react-redux/blob/master/docs/a…](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) In particular, pay attention to `mapDispatchToProps`, which can take either a function or an object. If you give it an object as a map to your action creators as values these functions will be automatically wrapped in `dispatch` for you. ;-) [pramod](https://hashnode.com/@pramodvidyarthi) [Feb 20, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58aa899480587db1a3143c8e) Great post hugely helpful application-skeleton while developing large applications. [Caleb whiting](https://hashnode.com/@whmountains) [Jan 6, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/586ffeb890b17752d816dc71) Thanks a lot! I've been struggling to maintain a disorganized app for a long time, but I think the concepts you have presented here will do the trick! [Michael Gilley](https://hashnode.com/@michaelgilley) [Jan 6, 2017](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/586ffeb890b17752d816dc71#reply-587018bc90b17752d816dcc4) You're welcome @whmountains ! [Anand Reddy Rikka](https://hashnode.com/@anandrikka) [Dec 19, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58577688f74151b646c92c1d) Very nice post @michaelgilley I'm implementing a similar approach you proposed for my PoC. [Prashanth Acharya M](https://hashnode.com/@pra) [Nov 23, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58355ce3f533d193a2e68b4f) For importing module across features i like Jack hsu ([jaysoo.ca/2016/02/28/organizing-redux-application](http://jaysoo.ca/2016/02/28/organizing-redux-application/)) implementation. [Michael Gilley](https://hashnode.com/@michaelgilley) [Nov 24, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58355ce3f533d193a2e68b4f#reply-58368c28a0b912afa2e17329) Yes, that scheme is very close to Ducks as well and there are several different ways to stash the modular components of a Redux app. Perhaps the most important is uniformity in design across modules. Also, while I do like the separation of each _type_ into separate files this would also have the disadvantage of even more boilerplate code/structure to manage per module. Thanks for the post! [Vedran Blazenka](https://hashnode.com/@vblazenka) [Nov 22, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/5834539df533d193a2e689d4) Question regarding this statement: > Specifically, we are currently passing every prop needed down from the Container level. These props are either defined in the Container or injected via the connect HoC. While this makes organization simple it also means every change or addition of a prop equates to changes to every JSX component in the tree. This gets tiring. Do you have some kind of solution for this? I find myself using one container that is connected to Redux store and passing everything to my children. Result of that is a lot of returning in mapStateToProps and mapDispatchToProps. One logical solution for me is to separate one big container to maybe 2-3 smaller containers for easier tracking of what is imported and connected. Is there anything else you can advise? Thanks! :) [Michael Gilley](https://hashnode.com/@michaelgilley) [Nov 22, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/5834539df533d193a2e689d4#reply-5834886cf533d193a2e68a41) Hi @vblazenka . We use many different containers and at each container level have a separate module. Props are not passed into Containers from parents though (except from Providers like react-intl, Redux, or React-router). It makes for a much flatter architecture than having only 1 container BUT there is still the problem of passing things down multiple levels when components get deep. I'm not sure what the fix for this would be and using context is out of the picture. I just might be the price paid for the other benefits of such a design.... [Stephan Meijer](https://hashnode.com/@smeijer) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58331a82d30fa81b7b8a270a) If you were using [redux-define](https://github.com/smeijer/redux-define) you could reduce the boilerplate of defining action types. Especially when using status suffixes like `ERROR` or `SUCCESS`, it can make a big difference. Turning your example ``` export const ADD_TODO = 'todos/ADD_TODO' export const ADD_TODO_SUCCESS = 'todos/ADD_TODO_SUCCESS' export const ADD_TODO_FAILURE = 'todos/ADD_TODO_FAILURE' ``` Into ``` export const ADD_TODO = defineAction('ADD_TODO', [SUCCESS, FAILURE], 'todos'); ``` [Michael Gilley](https://hashnode.com/@michaelgilley) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58331a82d30fa81b7b8a270a#reply-58331ea9d2221d852de98e91) @smeijer Is that your own library? ;-) Looks like a great idea. We just may start using it. :) Thanks for the input. [Stephan Meijer](https://hashnode.com/@smeijer) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/58331a82d30fa81b7b8a270a#reply-5833209fa96be26a2dc48f91) Yes it's mine. I should have mentioned that. I use it with redux-actions and redux-saga like the example in the readme. And really like the now obvious separation between actions and status updates. While having less boilerplate. [Caner Dağlı](https://hashnode.com/@cdagli) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/5832cb7bd30fa81b7b8a2658) Thanks for the great post Michael. What if two different modules have common components? How would you organize that? [Michael Gilley](https://hashnode.com/@michaelgilley) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/5832cb7bd30fa81b7b8a2658#reply-58331a9ba96be26a2dc48f75) Thank you @cdharrison. If you have common components (for example forms or a common header) you'd move those out to their own module. We have a few of those global modules like FormElements that don't need a module dir/file but live at the root level anyway and are imported where needed. In these cases the root App module does not import anything from these modules. Great question! [Jaroslaw Zabiello](https://hashnode.com/@hipertracker) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/5832c94fa96be26a2dc48e7a) This all can be done much simpler and more declarative than Redux Saga. You have to look at Cerebral's [signals](https://cerebral.github.io/concepts/02_signals.html) and it's excellent [function tree](https://www.npmjs.com/package/function-tree), it can be used not only in [Cerebral](http://www.cerebraljs.com/), but also in Redux or Mobx. [Michael Gilley](https://hashnode.com/@michaelgilley) [Nov 21, 2016](https://hashnode.com/posts/tips-for-a-better-redux-architecture-lessons-for-enterprise-scale/58327eec23b26d367bf71cd3/comment/5832c94fa96be26a2dc48e7a#reply-58331cccd30fa81b7b8a2714) Thanks for the tip @hipertracker. I haven't looked at cerebral yet. I'll have to read more about it and see how it compares.