Creating a ToDo app using Redux Toolkit and React Redux Hooks

December 29, 2019

The APIs we're gonna use

@reduxjs/toolkit has these 4 functions to make your dev life easier

code

configureStore(); // wraps createStore() + DevTools + Middleware (redux-thunk)
createAction(); // Creates an Action creator by taking an action type. Generated function takes a single argument that becomes action.payload
createReducer(); // Creates a reducer function
createSlice();

And react-redux has these 2 hooks that we'll use

code

useSelector(); // lets you extract data from the Redux store state, using a selector function
useDispatch(); // lets you dispatch Actions

And in React we'll use hooks too

code

useState(); // handling 'local' component state
useEffect(); // lifecycle events and side effects

What Store (i.e. our app state) is going to look like

code

// State tree
{
  todos : [
    {
      id: uuid(), // import * as uuid from 'uuid/v4'
      createdAt: new Date().toISOString(),
      title: 'Create a React todo list app',
      description: 'Use redux toolkit and react-redux hooks', // optional
      status: 'In Progress', // 3 Statuses total: Done, In Progress, Pending
      list: 'Dev'
    },
    {},
    {}
  ],
  lists: [
    {
      id: v4(),
      createdAt: new Date().toISOString()
      title: 'Dev'
      description: 'Code and development related tasks' // optional
    },
    {},
    {}
  ],
  filter: 'showAll'/'showDone'/'showPending'/'showInProgress'
}

code

// Actions
todos / add;
todos / update;
todos / remove;

Create reducers first, Actions next. With createReducer() you can actually pass the createAction() directly and make creating the reducer and action a single step.

Redux

Add todo item

code

import { createAction } from '@reduxjs/toolkit'
import v4 from 'uuid/v4'

const addTodo = createAction("todos/add", function prepare(title, description, status = 'Pending', list) {
  return {
    payload: {
      id: v4(),
      createdAt: new Date().toISOString()
      title,
      description,
      status, // unless you allow setting a status when creating a todo, this is going to be 'Pending' by default
      list
    }
  };
});

code

import { useDispatch } from "react-redux";

useDispatch(addTodo("Write more docs"));

Creating a ToDo app using Redux Toolkit and React Redux Hooks

The APIs we're gonna use

What Store (i.e. our app state) is going to look like

Redux

Links