DEV Community

Gabriel
Gabriel

Posted on

Setup Redux Step by Step Part 2

In Part 1 we did a basic Setup for React Redux
using Store->Reducer->Actions and Action Types

  • Today we will try to simplify this using Redux Toolkit.
  • first we need to install it with "npm install @reduxjs/toolkit"
  • What we aim to do is combine the Reducer and ActionCreators in one createSlice function.

1.) We use configureStore to simplify the store
This will make it easier to use Middleware later on, and we can easy combine reducers from different files.
e.g /todos.js exports a reducer and /user.js exports a reducer

/
import reducer from './todo';
import { configureStore } from '@reduxjs/toolkit';

export default function configureAppStore() {
  return configureStore({
    reducer,
  });
}


Enter fullscreen mode Exit fullscreen mode

2.) We can easy create Actions with createAction

/actionCreators.js
import { createAction } from '@reduxjs/toolkit';

const todoCreated = createAction('ADD_TODO');
const todoRemoved = createAction('REMOVE_TODO');
const updateStatus = createAction('CHANGE_STATUS');
Enter fullscreen mode Exit fullscreen mode

This will create 3 actions we can dispatch like this:

import configureAppStore from './store/configureStore';

const store = configureAppStore();
store.dispatch(actions.todoCreated({ description: 'Second todo' }));
store.dispatch(actions.updateStatus({ id: 1, status: 'closed' }));
Enter fullscreen mode Exit fullscreen mode

3) But we can also get rid of action creators using createSlice(this will use action creators and reducers under the hood)

/todos.js
import {  createSlice } from '@reduxjs/toolkit';
const slice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (todos, action) => {
      todos.push({
        description: action.payload.description,
        id: ++lastId,
        status: 'open',
      });
    },
    todoStatusChanged: (todos, action) => {
      const index = todos.findIndex((todo) => todo.id === action.payload.id);
      todos[index].status = action.payload.status;
    },
    todoRemoved: (todos, action) => {
      todos.filter((todo) => todo.id !== action.payload.id);
    },
  },
});

const { addTodo, todoStatusChanged, todoRemoved } = slice.actions;
export { addTodo, todoStatusChanged, todoRemoved };
export default slice.reducer;
Enter fullscreen mode Exit fullscreen mode

This will create a function with initialState and reducer functions.It will also generate Action Creators.
Dont forget to export the actions , also we need to
export default slice.reducer

As you can see here:

  todos[index].status = action.payload.status;
Enter fullscreen mode Exit fullscreen mode

we are mutating state directly, this is only possible because createSlice is using immutability under the hood.
So it will make your code easier to read, and much more easy
to write.

I hope this explains a little bit how redux toolkit makes things easier for us and how we can use it.

Top comments (1)

Collapse
 
seif_sekalala_81e09fe6b9e profile image
Seif Sekalala

Bro, this is amazing! Good job!