Understanding the core concepts of Redux

Disclaimer for anyone who finds this article: I’m not an expert on either React nor Redux, and I’m writing this article mostly for myself to note down my thoughts. Feel free to correct me if anything is completely wrong!

So you start learning React, and you’re getting the hang of all the essential aspects such as components, props and state. Now you’re hearing about Redux and how amazing it is for managing state, but after reading the docs and some other tutorials, you still don’t get it completely.

Here is how my brain understands it 🤔

Redux is basically just global state. Once I understood that part, everything else just sort of clicked in my head. Before explaining what actions, reducers and stores are, we first need to understand why global state is even useful.

Situation: Let’s say your component tree looks something like this:

Notice how even though we only want counter in CounterDisplay , we have to pass it down as a prop through MainContent , InfoPanel , and even Footer on the other branch, just so the value can get down to the right place. These components don’t care about counter at all!

And in the case of IncrementButton , we need to pass it a callback to increment the actual value, and the callback has to pass through both Sidebar and ButtonSection . Again, these components don’t need that callback at all! Now imagine if, instead of just 2 levels deep, you have even more nested components 😫

Wouldn’t it be better if the components that actually cared could get those values directly, without having to pass them down all the way?

As it happens, this is exactly the type of problem that global state can solve 🤯

Keep in mind that it’s not always useful or desirable to keep all state in the global state — you should limit yourself to only storing application state which is actually needed globally by your app. This could be for example the logged in user. UI state (e.g. isOpen for a drop down list component) is probably not needed globally for your application, so this can just live inside regular React component state.

So how does that work? Firstly, our state is kept globally in a so called store, instead of being tied to a particular component. When we want to read from our state (which is immutable), we need to connect our component that needs the state to the store.

Connecting is like “okay, I have my state globally, but I want this component to be able to access it (in the form of props), no matter where in the component tree is”. Thus, we can bypass having to pass the counter value down, we just connect the CounterDisplay component to our store .

Right, so I just said that state is immutable, so how do you change it? Instead of being able to change the state directly (as in this.setState() in React), you have to “dispatch” actions . An action is, simply put, an object that describes what just happened.

What does “dispatch” mean? When you connect a component to the store, the component will receive a function prop called dispatch. To dispatch an action, you simply need to call dispatch(someAction). For the example above, you could write this as:

So now you understand that you can never modify the state directly, only dispatch actions. When you first create your store, you need to pass it a reducer , which is just a function that, given the state and an action, returns a new state, and is called every time an action is dispatched.

Reducers are really simple to grasp if you see an example:

There are tons of other stuff that you can read about such as middleware, time travel debugging etc. Definitely check out something like Redux Thunk or Redux Saga if you want to do async stuff with Redux.

Related posts:

essay writing service TOP 10 LEGIT ESSAY WRITING SERVICES Top 10 Legit Essay Writing Services The solely way to succeed in the course of the educational course is to go for skilled service…

Markedet blir sterkt påvirket av nyheter. Den siste tiden har vi blitt møtt av en rekke “negative” hendelser. På vegne av Kryptoteket har jeg forsøkt å sette lys på et par relevante saker og “ferske…

A quick response to https://medium.com/iota-demystified/is-a-memorable-sentence-a-safe-iota-seed-14072528f608. Yes, it may be hard (admittedly, currently impossible, but with a considerably smaller…