Norbert Suski

Senior Frontend Developer

Nov 24, 2020 in Development

Understanding Redux: Beginner's guide

When you are a junior developer, learning Redux can be something really overwhelming. This leads to avoiding it at all cost and using alternatives like MobX, ContextAPI or simple React Hooks.

It's not something bad actually, but if you take a look at job offers, you can see Redux is almost always a requirement. In this article I'll try to explain Redux in the simplest way I can.

Let's do it!

My first steps with Redux

Honestly speaking, I was also postponing the moment in time to learn Redux. Most of the time I was using MobX, when React Hooks and ContextAPI didn't exist.

And one day… I just sat down to the code and decided to face Redux! 

Well, it was not easy in the beginning, but believe me—this technology is awesome! If you're a frontend developer, this is a must for you. Funny thing is that it’s really hard to understand at first, but at some point it just clicks and everything becomes clear!

Setup

Like always, I'll start with creating a new application using create-react-app. But won’t start with Redux. I want to begin with simple React Hooks to set up some easy case that we will migrate to Redux then.

Also, I'd recommend to delete all the stuff related to tests, service workers, etc. You can check setup commit on GitHub here: https://github.com/norbertsuski/redux-tutorial/commit/805191ab3f834f40d53cabb61427d81472f80969.

As always, link to the repository is at the end of the article.

Simple state

Let's create a simple state in App.jsx file.

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [todos, setTodos] = useState([]);

  return (
    <div className="App">
      <header className="App-header">
        <p>List of TODOs:</p>
        <ul>
          {todos.map(({ id, title }) => (
            <li key={id}>{title}</li>
          ))}
        </ul>
      </header>
    </div>
  );
};

export default App;

When you run this code, nothing special will happen on the screen. Simple 'List of TODOs' text will show up, but nothing more. This is because our list of TODOs is empty.

Let's add a simple form to handle adding new TODO.

For the sake of simplicity, we can agree that visual part of this tutorial is not the most important thing and I’ll just make it as simple as possible.

Our App.jsx file should look like this and be able to add new positions to the list:

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [todos, setTodos] = useState([]);
  const [todoTitle, setTodoTitle] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    setTodos((prevTodos) => [...prevTodos, { title: todoTitle, id: prevTodos.length }]);
    setTodoTitle('');
  };

  const handleOnChange = (event) => {
    setTodoTitle(event.target.value);
  };

  return (
    <div className="App">
      <header className="App-header">Learn Redux</header>
      <main>
        <form onSubmit={handleSubmit}>
          <input value={todoTitle} type="text" name="title" onChange={handleOnChange} />
          <button type="submit">Submit</button>
        </form>

        <p>List of TODOs:</p>
        <ul>
          {todos.map(({ id, title }) => (
            <li key={id}>{title}</li>
          ))}
        </ul>
      </main>
    </div>
  );
};

export default App;

This example is a simple case scenario with two states - for the list of TODOs and for handling title value changes. We can assume that todoTitle state is used internally and doesn't need to be exposed outside of this component.

But we can imagine a situation when TODO list is used by multiple components passing it via properties or handling its change, extending it from many different places. That can become a challenge as the application keeps growing. This is a situation when state management libraries come into play.

Let's try to refactor it to use Redux.

Redux setup

Now it's time to install all required Redux dependencies. 

npm install react-redux redux
npm install redux-devtools --save-dev

Let's start with some theory first. I'm assuming that you are at least familiar with React Hooks already.

The code we created before is an example of 'one-way data flow': a state that describes current condition of the app, where UI is rendered based on the state and actions that the user performs are updating the state, which causes UI to re-render again.

Flow in Redux is almost the same, but names of some elements are differing a little bit or have a few more functions.

Let's try to recreate the flow we did already with Redux. You'll get familiar with three basic building blocks: store, reducers and actions.

Creating a store

What is a store? Store holds all your application states. This is a single source of truth, a container for state, which is then injected to the application and every building block of the application can have a ‘connection' to it. Good design practice is to have only one store per application. Let's create a new folder called store and index.js file inside.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import App from './App';
import store from './store';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

Now, when you open your browser you should see a beautiful error similar to this one:

This is because we need to pass a reducer to the createStore function. Let's create one now.

Creating reducer

What is reducer? Actually, it’s just a function which is responsible for changing state of application. What's important here—reducer cannot modify existing (passed) state. It has to make immutable updates by copying the existing state and making changes to the copied values.

Reducer can't have any side-effects and can't do asynchronous logic like calling backend services. New state is always calculated based on arguments passed to the reducer. Normally, an application can have multiple reducers, but in our case we will do just one.

Let's create reducer.js file in our store folder with the following content:

const initialState = {
  todos: [],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default reducer;

The first part here is really simple—it's just an object with initial state of our application, which is an empty list of todos. Just like in useState hook.

Then we have a reducer function which has two parameters: current state that will be used inside the reducer to calculate new state and action object, which is describing how state should be changed.

I'll describe the actions in next chapter. Now we should modify our index.js file in the store folder.

import { createStore } from 'redux';

import reducer from './reducer';

const store = createStore(reducer);

export default store;

Et voila! Application is working again! Now let's jump into actions and make Redux store work!

Lights, camera, action!

The last part of our Redux implementation are actions. Action is a plain JavaScript object that have a type field and describes what happened in the application.

Type is a simple string field used by reducer to determine which action actually happened.

Do you already know what can be the action in our case? That's correct - setTodos is something that can be converted into a Redux action. What else do we need here apart from the type field? Of course - we need to pass actual todo to action.

Let's create actions.js file in store folder with the following content:

export const addTodo = (todo) => ({
  type: 'todos/addTodo',
  payload: { todo },
});

Wait! You said that action is a pure JavaScript object and I see a function here! — you might say. And yes, you would be right.

I packed action object into a function that returns an actual action—this convention is called action creator and it's used very often. You will see why in a moment.

What you can see here is a function that gets todo object as a parameter and returns simple object with type field and payload field—it's a good practice to pass data we want to use through payload field.

Now let's try to connect our application with Redux store.

Connecting pieces together

To connect our application with Redux store we need to use function provided by react-redux package called... connect. Let's modify our App.jsx file content:

import React, { useState } from 'react';
import {
  arrayOf, number, string, shape,
} from 'prop-types';
import { connect } from 'react-redux';
import './App.css';

const App = ({ todos }) => {
  const [todoTitle, setTodoTitle] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // setTodos((prevTodos) => [...prevTodos, { title: todoTitle, id: prevTodos.length }]);
    setTodoTitle('');
  };

  const handleOnChange = (event) => {
    setTodoTitle(event.target.value);
  };

  return (
    <div className="App">
      <header className="App-header">Learn Redux</header>
      <main>
        <form onSubmit={handleSubmit}>
          <input value={todoTitle} type="text" name="title" onChange={handleOnChange} />
          <button type="submit">Submit</button>
        </form>

        <p>List of TODOs:</p>
        <ul>
          {todos.map(({ id, title }) => (
            <li key={id}>{title}</li>
          ))}
        </ul>
      </main>
    </div>
  );
};

App.propTypes = {
  todos: arrayOf(shape({
    id: number,
    title: string,
  })).isRequired,
};

const mapStateToProps = (state) => ({
  todos: state.todos,
});

export default connect(mapStateToProps)(App);

Phew, a lot of things has happened here!

First of all, I imported connect function from react-redux and used it in a last line of the code and passed mapStateToProps function. This function is another convention in Redux used to map application state into props passed to component.

As you can see there, I only get todos from state object and pass it to todos field. This field can be read as component property then (see App function parameter).

If you still aren’t sure that this is working, we can modify initialState object in reducer to verify it:

const initialState = {
  todos: [{ id: 1, title: 'test1' }],
};

And this is what we have on UI:

Redux dispatched action @@INIT on our reducer (which you should never react to in reducer!). This initialised our state with values from initialState object (default case in switch) and then we mapped state into props using mapStateToProps function passed to connect function. 

Using dev tools with Redux

Before we jump into modifying our state, let’s talk about dev tools that will help us control what is happening inside Redux store.

In the Chrome browser, there is a very helpful tool called... Redux DevTools. You can install it as a Chrome extension. To make it work we need to modify our store a little:

// change this line:
const store = createStore(reducer);

// into this:
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

Thanks to this, you will be able to see what is happening with application state. As you can see on the screen below, there is one action @@INIT called and on the right side—the current state of our application. You can experiment with this tool later when we’ll be handling state modifications.

Dispatching actions

To modify our state (add a new todo in this case), we need to do something called action dispatch. This will pass action to reducer which will take care of our state modification. 

Let's try to do this in App.jsx file.

import { addTodo } from './store/actions';

import './App.css';

const App = ({ todos, dispatch }) => {
  const [todoTitle, setTodoTitle] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(addTodo({ title: todoTitle, id: todos.length }));
    setTodoTitle('');
  };
...

What changed here? I did the following things:

  • imported addTodo function from actions.js file,
  • destructured dispatch function from components props (it's available because we used connect function, remember?),
  • used dispatch function with addTodo action creator and passed new todo to this.

When you look at dev tools you will see this after clicking Submit button:

We successfully dispatched todos/addTodo action!

But nothing happened on the UI... this is because our reducer is not reacting on this kind of action. We need to adapt it for this now.

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'todos/addTodo':
      return { ...state, todos: [...state.todos, action.payload.todo] };
    default:
      return state;
  }
};

Now, our reducer is able to do some logic on dispatched action (which means that new todo is added). Also the UI displayed modified todo list:

Simplifying action dispatcher

You’ve probably noticed that dispatching action looks a little bit odd, but it can be simplified.

We’ll use almost the same mechanism as mapDispatchToProps. We need to do the following changes in App.jsx file:

import * as todoActions from './store/actions';

...

const mapDispatchToProps = {
  addTodo: todoActions.addTodo,
};

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

And now we can use addTodo function like this:

const App = ({ todos, addTodo }) => {
  const [todoTitle, setTodoTitle] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    addTodo({ title: todoTitle, id: todos.length });
    setTodoTitle('');
  };
...

Thanks to this, we no longer need to use dispatch manually and our application is still working as before.

Summary

Today you’ve learned:

  • how to install Redux, write store, action (and action creator) and reducer;
  • how to connect application with Redux store and dispatch actions;
  • how to use dev tools to see what is happening inside.

However, this is a very basic knowledge and a very simple code. There is a lot of things that can be improved, like: move types to consts, generate id on reducer side, disable dev tools for production code, etc.

I intend to create a series of articles about good practices in Redux, so stay tuned!

Link to repo: https://github.com/norbertsuski/redux-tutorial.git 

Do you need more information about this topic?

Schedule a call with our developers

Let's talk!

Back to top