Redux (on process)

Redux helps us to create a single source of truth, to group the state of our components in a JavaScript object separate from our containers or components. We can get and update the state we want connecting our component to this separate object. We wrap our component tree so we have access to Redux functions. We can grab the state we want  and Redux will map it to our component as a prop.

We keep our state in the store. To update the data we have in the store we have to send an action, with a type and maybe a payload to the store, who send it to our reducer that holds information for how Redux can update that state depending on the type of the action. Actions and reducers are POJOS.

Any component ‘connected’ will be able to modify the state using an action we’ve defined.

We keep our state in one JS object, the store, and our actions and reducers on another two different JS objects.

Reducers will need a state and an action, and Actions will need a type property and an optional payload.

When we update the state it is very important not return null or undefined, that’s why we use a default return.

Reducers are pure functions. Our reducer never updates the previous state, creates a new state object.

The reducer updates the state but doesn’t persist these changes. To persist these changes we can reassign the return value of the reducer to a variable. We can encapsulate that in a function, in dispatch.

We dispatch an action to the store, who calls our reducer and returns to us a new state.

We create a store function ( which is a closure) to encapsulate the state (so we don’t change it by mistake in other places of our code), to encapsulate our dispatch function and to encapsulate a function to get the new state (getState). When we call this store function we get an JS object with our dispatch function as a method, which has access to state.

Redux works by having an action dispatched, which calls a reducer, and then renders the view.

Using Redux in an React app

To install Redux in my app I type into my console:

npm install --save redux 

npm install --save react-redux

npm install --save redux-thunk

  1. Initialize my store in index.js using createStore Redux function and pass it down to my top-level <App /> container.

To have access to the store in any of our components we import the react-redux function connectinto the component where we want to have access.

If we want some state we can use:

We can access these data as: this.props.whatEverWeWant. We can create our own customised props playing with the data of our store, with the state with have created in the state of our reducer. For example here we have whatEverWeWant only in the state, but if we want a prop like numberOfwhatEverWeWant we don’t modify our reducer, we can add numberOfwhatEverWeWant: state.whatEverWeWant.length in our mapStateToProps and that’s it!

If we want to dispatch an action and update our store we do something like:

Then to be able to debug I have installed redux-devtools-extension and add this code to my index.js:

connect function

connect function listen to changes in the state.

When a change occurs it calls the function mapStateToProps()where we specified the info we want from the state and gives it to us as a prop. We have to write this function ourselves. This function has access to the entire store’s state.

And then we finally specify which component of our app we are providing with this data.

If we don’t give a second argument to connect,(mapDispatchToProps would be the one), connect gives us the prop dispatch for free! This second method allows us to customise how we send actions to our reducer. If it is not for this second argument, our component wouldn’t know anything about Redux and our store.

One pattern is to only connect Container components.

Redux Actions

Actions are POJOs that has a property of type.

We dispatch our action to the store (whit the dispatch method), the store passes the action to the reducer, that checks the type property to see what he has to do, what changes will make to the state. Remember reducer takes two parameters, state and action.

We should wrap our actions into functions, in case these actions have some parts that will need to change or add different payload properties (like a user to the list of user), and we pass those functions to the dispatch method. Those functions are called action creators.

We keep our React application separated from our Redux application by using the Provider component and the connect() function.

We don’t reference our store in our components. mapStateToProps() and mapDispatchToProps() allow us to separate concerns. The first one helps us to manage our state and the second one is an action creator, mapped as a prop. Our components only display state, they don’t manage it.

We pass these two functions to connect(). When connect()' executes it calls the first function, mapStateToProps, and pass it the current state. Then it calls the second function and passes it the dispatch function. The dispatch function takes an action, so don’t forget to import the action :). Then we can access this dispatch function as a prop.

Refactoring these methods.

This is equivalent to:

We can pass an anonymous function as first argument to connect, and we can pass a function, if we do this we have to do it as before, or an object and connect will pass it the dispatch function. If we pass an object, this one needs to contain key/value pairs for each action creator we want to become props. As of JavaScript ES6, when we have an object with a key and value with the same name, we can use the shorthand syntax and write { addItem }.

combineReducers()

It combines the different reducers we pass to it into one single reducer that we pass to our store.