You may be wondering when, or even if, you should add Redux to your skillset. Redux will not only make it much simpler to manage state, it will also make your code easier to follow, test, and debug.
While Redux can be used for any UI layer, React and React Native are the most common. There are bindings available for Angular, Angular 2, Vue, Mithril, and more. Redux simply provides a subscription mechanism which can be used by any other code.
If you are just building small SPAs (Single Page Applications), then managing your application state using local component state and allowing components to pass state down as props will get the job done. If you intend on scaling up your apps or building larger applications, you should give Redux a try. Once you get comfortable using it you will never want to go back.
Redux is a completely different approach to managing state in your applications. It is not unusual for new users to find it challenging to fully grasp all the new terminology and how all these features work together to manage state (count me in). Stay with it, you will be glad that you did as your applications start to grow.
Reactjs.org has the resources to walk you through adding Redux to your app along with tutorials and documentation. The purpose of this brief explainer is hopefully to demystify some of the background magic that takes place and act as a good primer as you begin.
The Store
The store is where your application state is going to be stored as objects. You can connect your components to the store so that they can access the state of objects that they need and be informed whenever the state is updated.
Actions
So, how do we update state? In Redux we can use Actions. Actions contain information about an event that is initiating an update to state such as a button click. This action will be dispatched to a Reducer. The reducer will need to know what action to take and typically also the information needed to update state.
Reducer
The reducer file will contain your functions for updating state. These are pure functions in that, given the same input, they will always return the same result. For example, an action might be dispatched to UPDATE_TOTAL along with the new information often referred to as the payload. The reducer will access the current state, perform a function to update state and then return the new version of state. It is important to note that the reducer returns the new state but never actually mutates the state from the store. Using our update total example, we would set the initial state of total to 0 in our store and then dispatch and action to our reducer to perform any updates.
When our update total action is dispatched, it will perform a function, let us say add 1 to total. This will then return a new version of total with state going from 0 to 1. A key point here again is that it will not change the initial state of total in our store. It will remain 0. In our example, if we are not persisting these changes to perhaps a backend database, all state will return to the initial state defined in our store once the page is refreshed. So, in this example, total would be reset to 0.
Pulling this all together, we have our Store that is the single source of any global state. Our components can connect to the store and access any needed states. Inside our components we can have Action Creators that will dispatch instructions to our Reducer. The reducer will take in the action and the data that is passed to it, perform an update and then return a new version of the modified state.
Using Redux does not prohibit you from maintaining local state within a component if the situation calls for it. You can still use React setState for local updates. I hope this helps you to decide if Redux is a good fit for your current or future projects. Good luck and stay with it.
Top comments (0)