Redux….. How, What, Where, Why?

I know it’s been a while, but I didn’t realize how long it had been since the last time I made some changes to my blog here.

So many things have changed but I will write about that in another post. This is one is in regards to Redux.

Just a quick update I have decided to learn React Native. I’ve been at it for about a month just a few days short and everything was going great until (sinister music would be playing about now, it is in my head).

REDUX. 

I think the problem started when I didn’t quite understand the purpose behind it, why we should use it and how it would help. Instead I just kept on reading and watching and becoming more and more confused.

I was blindly following along with the tutorial and I had to stop myself. I had one of those serious talks with myself and decided I had to go back and try again. Pause what I was doing and rewind.

So here I am going back to what works for me and that is to try and explain it to others so that I can better understand it myself.

Let’s get started with what is Redux.

From what I gather Redux is another javascript framework what makes it different is that this framework takes care of all the “state” in your application. What that means is that for larger and even smaller applications there is one box where all your state lives in (so far so good). It’s like a collector box or a storage bin for your application state.

This collector bin is called a store, (good name because it helps to think of it as a store where all the components have to come and get their state from the store). Redux makes this even easier by using Redux.createStore() to create a store.

Next to know is that Redux wants to update the state, but for it to update it something needs to happen. That something is called an action. (Wow this is all easy so far) The action is a javascript object that contains information about the event that happened. This action object can work with data but it doesn’t have to, the only thing it needs to work is a type property that tells it type of event that occurred. A click of a button, or input is entered, someone logged in. Whatever you need it to be.

Now we need a way to get that action to the store. We need a bus or plane or something to get it to the store. Redux calls this an action creator. This is the connection between the store and the action. An action creator is a javascript function that returns the action. But before the action creator can go anywhere it has to be dispatched. Hence the dispatch method.

store.dispatch() will send the action creator to the store.

Now what?

Well now the store needs to be told what to do with that action. In comes the reducer function. The reducer is how we make modifications to the state based on an action. However a reducer must not make changes to the original state. It will take the state and create a new version of it and return the new version. The reducer is simply a pure function that takes state and action, then returns new state.

The way the reducer works is like a giant if statement. If what you received matches a specific action do this with the state and send it back. If the user logged in change the homepage to their set up. If they clicked the new account button take them to the sign up component, etc.. You can tell the Redux store how to handle multiple action types.

This is pretty much the basics behind Redux. You use it to keep state in one location for easier access.

Let me know what you think.