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

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.

Related posts:

Introducing The Idea Bin, the ideal application for any crowdsourcing project. Our application was made with one goal in mind, to create a community driven by shared ideas and the exchange of…