React Redux Made Easy
Learning Redux is quite complex, and implementing it over a scalable website is, so time becomes a nightmare.
It’s 2020, and for React state management, people usually go with either Redux or Context. Redux is usually being used for large applications, and Context API is mostly used for the smaller applications because of the structuring of the project.
I personally believe that state management is still a huge mess because no matter what you do, as your project Grows no matter what you used, it will become difficult to manage state and the project structure overall. I hate when I have to create multiple files and import from 10 different files for just state management, it just drives me crazy to look at such a messy code structure.
So What is the solution? I recently like 6 months ago came across with the concept of reducks, and the concept quickly took my attention, it was a concept, according to which, your reducers, actions and effects and subscription all should be in one place. You can learn more about reducks here.
It is a solid concept of having all the module related state manage by a single file, but we needed a more practical approach. After researching for a while, I came across a Library called DVA. It is based on redux, redux-saga and react-router. Basically, We have models in DVA, and we organize models with
How is it different then reducks? Well it is not, I feel like it is based over reducks concept, it is originally called the elm concept. Well, Elm is basically a tree known for its adaptation, rapid growth, and resistance. You can learn more about elm over the internet.
Here is an example of a DVA model.
This is a simple DVA structure, and it shows how we combined reducers, effects and subscription all in one file to save our self from messy project structure and give our selves some modularity.
One of the most awesome features of DVA that I discover is loading models on-demand; We can literally do all the authentication in one model and on successful login in, we can call up another Model named User, which manage all the user-related global state management. On logout, we can unmodel the User Model to save our self some cleaning and resetting of the global state.
You can initialize the DVA like this.
Thank you for reading this short article. I hope you found it useful.