React Redux Made Easy

Learning Redux is quite complex, and implementing it over a scalable website is, so time becomes a nightmare.

Raja Osama
Nov 10 · 3 min read

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.

Image for post
Image for post

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 actions , reducers, effects and subscriptions.

Image for post
Image for post

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.

Image for post
Image for post
https://gist.github.com/Raja0sama/386bf808a174a4c76a715609a1af646a

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.

Image for post
Image for post

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.

Image for post
Image for post

You can initialize the DVA like this.

Image for post
Image for post

Thank you for reading this short article. I hope you found it useful.

LinkedIn 🔗
Github 🔗
Website🔗

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store