React Redux Store Setup Tutorial

How to install redux and setup global store state object

Note, currently most Redux code is written with Redux Toolkit and TypeScript. This tutorial is about the plain vanilla Redux installed on top of a simple React app without TypeScript. So realy this is just a bare bones Redux tutorial.

A lot of the time people get confused about Redux Toolkit, because it's impossible to understand without first understanding how Redux library works with its basic functionality.

Most people who are learning Redux get confused by its complexity. This is often the case because you need to first understand the "roundtrip" of the state updates, and how it will pass through a reducer, before changes are reflected again in the UX updates.

In this redux tutorial, we'll go over the details of creating a store.

Watch the video version of this react redux tutorial on YouTube:

Make sure to use cd command to navigate to your project's directory on command line. It could be something like: C:\projects\react\myProject\.

First install redux and react-redux packages from command line:

npm install redux react-redux --save-dev

This will install redux into your React project and add dev dependencies to package.json file.

Creating global state object consists of several parts.

It might seem like a lot of work at first (and that's why we have Redux Tookit and Redux Saga API,) but it's still important to understand how to set up store in plain redux without other libraries.

To create a redux store and connect components to global state object, you need to do the following:

• Install redux and react-redux packages to your React app from your project's directory.
• Import several packages from react and react-redux (see source code example below.)
• Create a reducer, and give it a name, like countReducer.
• To add actions to your reducer, using switch statement, and give your actions string names like "Add", or "Subtract", each returning modification to state object based on that operation.
• Create global store variable, and assign it to createStore with countReducer as its argument.
• Create mapStateToProps and mapDispatchToProps functions
• Create a functional Component
• Create Container, and assign it to connect function with mapStateToProps and mapDispatchToProps as its arguments, and pass Component to second set of parenthesis (see source code example below.)
• Wrap return value of your main App component with <Provider store = {store} /> component.

This looks like a lot of steps. But by the end of completing them you'll end up with following source code. This example also triggers Add and Subtract dispatch actions on button click, and modify the global state object via redux store.

You can add more actions, and of course, change what type of modifications each action actually applies to your state object, which can be mapping data, filtering database search results, etc.

Here's a simple React Redux store example.

import { useState, useEffect } from 'react';
import { createStore } from 'redux';
import { Provider, connect, useSelector, useDispatch } from 'react-redux';

// Create redux reducer
// Here it's named countReducer, because
// In this example we'll simply change numeric value
// by either adding or subtracting a number from it
const countReducer = function(state = 0, action) {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "SUBTRACT":
      return state - 1;
    default:
      return state;
  }
}

const store = createStore(countReducer);

const mapStateToProps = state => {
  return {
    count: state
  }
}

const mapDispatchToProps = dispatch => {
  return {
    add: () => dispatch({type: "ADD"}),
    subtract: () => dispatch({type: "SUBTRACT"})
  }
}

const Component = ({count, add, subtract}) => {
  return (<>
    <h1>Count = {count}</h1>
    <button onClick = {add}>Add</button>
    <button onClick = {subtract}>Subtract</button>
  </>)
}

// create container (smart component) from Component
const Container = connect(mapStateToProps, mapDispatchToProps)(Component);

function App() {
  return (<Provider store = {store}>
    <Container />
  </Provider>)
}

export default App;

Run this redux example in your React app, and click on Add and Subtract buttons. You will see the count value increase or decrease, effectively updating global state object via reducer's dispatch actions.

You can copy and paste this redux store example into your app to get started.

Another react redux store tutorial can be found here:

Conclusion

Setting up redux in a react app is not a tribial process. But once you set it up, you will enable global store state object on your entire react app via Provider component. This object can be accessed from anywhere in your React app.