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.
Great post hugely helpful application-skeleton while developing large applications.
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!
Very nice post @michaelgilley I'm implementing a similar approach you proposed for my PoC.
For importing module across features i like Jack hsu (jaysoo.ca/2016/02/28/organizing-redux-application) implementation.
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! :)
If you were using 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');
Thanks for the great post Michael. What if two different modules have common components? How would you organize that?
This all can be done much simpler and more declarative than Redux Saga. You have to look at Cerebral's signals and it's excellent function tree, it can be used not only in Cerebral, but also in Redux or Mobx.
Tony Brown
American Space Ninja
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!