Crash Course to Redux
In this article, I’m going to cover my understanding of the basic concepts of Redux.
What is Redux?
Redux is a JavaScript library used for state management for your application. It’s a very common library used in React and you’ve probably heard of it before. Why is state management important? Well, state can be used for conditional rendering or just rendering in general. For example, if you wanted to make an application that counted the number of times a button was clicked, you could store the number of times it was clicked and have that number rendered.
The reason why state management is imperative is because once you have a big application, there are more states to manage and the more of a hassle it becomes if you don’t have some method of managing them. One thing that makes Redux unique is that it includes a single store per app, keeping everything as I said before, centralized.
How does Redux work?
So there are 3 principles when it comes to Redux.
1) Store
2) Reducers
3) Actions
Store
The store holds the state of the application and is an object. While it is possible to create multiple stores, it goes against best practices. Keep in mind when using Redux, use one store per application! The state in Redux is often referred to as the object tree or state tree.
Actions
Think of actions as JavaScript objects that ONLY describe what happen. They themselves are not what changes state, but describes the change. Here are some examples.
Creating/editing/deleting an object
Toggling between states
{ type: “ADD_EXAMPLE”, payload: example }
Reducers
Each app has one root reducer! You may be asking yourself but what about the several objects that can be created that other apps have. Well, to deal with that, we can use a Redux function called combineReducers, thus creating the root reducer. Reducers are functions that take an action and directly change the state. Think of it as (state, action) => newState.
Let’s now talk about how it all works in sequence.
Let’s say a user want to create a task with just a simple field describing what the task is. Let’s say that user just hit the submit button.
1) The button click handler function (I typically name it handleSubmit(e) has another function attached to it which would have then dispatch the action to the store.
2) Redux then passes the action to the reducer
3) The store saves the new state from the reducer
4) The store then updates and the UI updates to show the new change
Conclusion
In summation, redux is a library that React users can use for state management. It provides a centralized store allowing for accessibility throughout an application to manage “global” state. Please check out the documentation I linked below for more information.
