Quick and easy beginner’s guide to implementing Redux in a React app

You have searched on countless occassions “when should I use Redux in my React app?”. Each time being greeted with the same response. “You will know when you know!”.

Finally, the day arrives, the state of your application has become difficult to deal with. It is now unnecessarily tricky to pass state around your app, and overall you don’t have a good picture of what is going on. BOOM! Time to meet redux. And finally “You know when you know!”.

Here is a quick overview of all the steps required to add redux to your react application:

1. install redux and react-redux
2. create a reducer.
3. create a store passing in this reducer.
4. wrap your app in a Provider passing in the store.
5. create a mapStateToProps function
6. create a mapDispatchToProps function (if you wish to update the state)
7. connect your app to the redux store

See below for a more detailed description of each of the above steps.

Firstly npm install --save redux react-redux

This installs both redux and the react-redux bindings (allows you combine react and redux).

Next you are going to need a reducer. This is simply a function that takes two arguments. The current state and an action. The reducer then returns the application’s next state following the effect of action passed in.

const counter = (state = 0, action) => {
  switch(action.type) {
     case 'INCREMENT':
       return state = state + 1;
   
     case 'DECREMENT':
       return state = state -1;
     default:
       return state;
   }
};

Now you are going to need a store. The store will hold the whole state of your app and will manage updating the state of your app. To create a store you need to call createStore passing in the reducer (counter) you have just created. Note that you need to import { createStore } from 'redux'

const store = createStore(counter);

Next, to give React access the store you need to pass the store into the app. To do this you firstly need to import { Provider } from 'react-redux'. Then you wrap your app in the Provider.

const store = createStore(counter);
render(
 <Provider store={store}>
   <App />
 </Provider>,
 document.getElementById(‘root’)
);

Next to access the redux state in a component you need to write a function called mapStateToProps . This function should return an object that you can then reference in your component through it’s props.

function mapStateToProps(state) {
   
    return {
       count: state
    };
}

There is still one thing to do. You need to use react-redux’s connect method to connect our react and the redux store.

import React from 'react'
import { connect } from "react-redux";
const App = (props) => {
   return <p>props.count</p>;
 
};
function mapStateToProps(state) {
   return {
     count: state
   };
 
}
export default connect(mapStateToProps)(App);

This will now show us the count of 0 . To fire actions we need to make another function called mapDispatchToProps . This will allow us to fire actions from our components and update the state.

function mapDispatchToProps(dispatch) {
return {
   
   increment: () => dispatch({type: 'INCREMENT'}),
   decrement: () => dispatch({type: 'DECREMENT'})
 };
 
}

After you have created this function you need to pass it to connect as the second argument.

export default connect(mapStateToProps, mapDispatchToProps)(App);

You can then dispatch these actions from the component as they are passed in as props.

Below is the full code:

index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './App.js'
const counter = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
   return state = state + 1;
case 'DECREMENT':
   return state = state - 1;
default:
   return state;
 }
};
const store = createStore(counter);
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

App.js

import React from 'react';
import { connect} from 'react-redux'
const App = (props) => {
return(
  <div>
   <p>{props.count}</p>
   <button onClick={props.increment}>+</button>
   <button  onClick={props.decrement}>-</button>
  </div>
 );
};
function mapStateToProps(state) {
return {
  count: state
 };
}
function mapDispatchToProps(dispatch) {
 return {
  increment: () => dispatch({type: 'INCREMENT'}),
  decrement: () => dispatch({type: 'DECREMENT'})
 };
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

And there you have it, react and redux combined — time to celebrate!