Notes

Creating a ToDo app using Redux Toolkit and React Redux Hooks

Edit on GitHub

Redux
2 minutes

The APIs we’re gonna use

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

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

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

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

And in React we’ll use hooks too

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

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

 1// State tree
 2{
 3  todos : [
 4    {
 5      id: uuid(), // import * as uuid from 'uuid/v4'
 6      createdAt: new Date().toISOString(),
 7      title: 'Create a React todo list app',
 8      description: 'Use redux toolkit and react-redux hooks', // optional
 9      status: 'In Progress', // 3 Statuses total: Done, In Progress, Pending
10      list: 'Dev'
11    },
12    {},
13    {}
14  ],
15  lists: [
16    {
17      id: v4(),
18      createdAt: new Date().toISOString()
19      title: 'Dev'
20      description: 'Code and development related tasks' // optional
21    },
22    {},
23    {}
24  ],
25  filter: 'showAll'/'showDone'/'showPending'/'showInProgress'
26}
1// Actions
2todos/add
3todos/update
4todos/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

 1import { createAction } from '@reduxjs/toolkit'
 2import v4 from 'uuid/v4'
 3
 4const addTodo = createAction("todos/add", function prepare(title, description, status = 'Pending', list) {
 5  return {
 6    payload: {
 7      id: v4(),
 8      createdAt: new Date().toISOString()
 9      title,
10      description,
11      status, // unless you allow setting a status when creating a todo, this is going to be 'Pending' by default
12      list
13    }
14  };
15});
1import { useDispatch } from 'react-redux'
2
3useDispatch(addTodo('Write more docs'))