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,
  });
}

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');

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' }));

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;

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;

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.