Redux toolkit – Refactor Redux structure

Tram Ho

Preamble

This article I wrote with the purpose of introducing a different design concept for the redux part in applications built with reactjs. With the old architecture design architecture, Redux has also somewhat improved the structure of files. However, for me, I still see they have some disadvantages such as:

With the old architecture there will be two main folders for the reducer logic, reducers / index.js and action creators, actions / index.js .

The big applications I usually divide the reducer file and the corresponding action together will have the problem that every time adding or editing a function in actions, it must be aside to the reducers to define or modify => quite effortless . Not to mention that as the app gets bigger and bigger the files in reducers , then finding the files to modify in a long list is quite time consuming.

=> So Redux toolkit brings a new breath to solve the seemingly small problem, but often causes an increase in the number of lines of code and software development time.

This article I will guide you how to use redux toolkit by converting an app from regular redux to using redux toolkit .

Prepare

  • First of all, you must have gained knowledge of Redux and Reactjs
  • Preparation of resource practice: I will use the classic sample of redux available todos app

Basically, the interface of the website is quite simple, besides with this app, there is no side effect, so there is no need to worry about middleware. In the next article I will guide you to integrate middleware into.

Ok, quite okay, before we start coding, we add a jsconfig.json file to import packages more conveniently:

Practice

Next are the steps to convert an application from using pure redux to using redux toolkit

Install package and configureStore

First install the toolkit package:

Initializing the Store with using configureStore Modify a bit at src / index.js , creating the store we will use the configureStore function of the redux toolkit package instead of redux’s createStore . This function accepts the input params as an object whose key is the reducer

Initialize the Slice

This is the main part that redux toolkit brings, which is also a new definition. In this section, we’ll look at definitions and implementations in our current application.

Understanding Slices

Basically, as the first part says, redux toolkit is used to combine actions and reducers together and that is the slice’s task and is implemented by createSlice . In fact, in the error section, it also has the createReducer and createAction functions, which can serve those who want to use redux toolkit but prefer old designs (hmmm). However, we only need to care about createSlice , this function is essentially a combination of createReducer and createAction .

Explain a little more, then you can look at the file root reducer:

Here we use the combineReducers function to combine the child reducer files into one root reducer, we can temporarily understand that these small files will be called a slice , but to be a slice, they will not have to add the functions to Update their states.

Convert to Slices

First we will start from file reducers / todos.js :

The task of this file will be:

  • Add todo to list when user calls ‘ADD_TODO’
  • Hill of todo state

We will create a folder features specifically for Slice , so todos will have the file structure /features/todos/todosSlice.js :

At first glance, you can see that this is an upgrade of the file reducers / todos.js , where we have another object reducers that seem to contain actions corresponding to the logic that changes state => reduced from 2 files. become a single file.

Thus createSlice will receive 3 arguments:

  • name: This will be used as a prefix to split slices so that later dispatching actions is easier
  • initialState: This part is similar to the old architecture, which is the initialization state of redux
  • reducers: An object that each key is like an action, these actions will trigger when they are dispatched corresponding type (At first look like the case of reducers in the switch of the old architecture)

It is understandable that addTodo case reducer will be triggered when action with type ‘todos / addTodo’ is triggered.

If you notice, we have lost the case defaults , this case will return the current state, they are not lost, but automatically createdSlice handle on.

Use Todos Slice

The first is to fix the root reducer reducers / index.js :

Next, we will have to update the addTodo function called in component containers / AddTodo.js , where the function still calls the old action, we will fix it as follows:

The next step is to revise the toggleTodo case in VisibleTodoList.js

Creating and Using Filter Slice

Similar to todos , we have one more slice to convert is visibilityFilters.js :

Rectify rootReducer:

Next to display, we have to modify the UI

  • FilterLink.js

  • Link.js

Cleanup

So the conversion is already loading up to 99%, our follow-up is to discard the redundant folders. And this will be the list but the folder will be removed:

  • actions / index.js
  • reducers / todos.js
  • reducers / visibilityFilter.js

The final structure will look like this:

/ src

  • / components
    • App.js
    • / features
      • / filters
        • FilterLink.js
        • filtersSlice.js
        • Footer.js
        • Link.js
      • / todos
        • AddTodo.js
        • Todo.js
        • TodoList.js
        • todosSlice.js
        • todosSlice.spec.js
        • VisibleTodoList.js
  • / reducers
    • index.js
  • index.js

Repo complete you can refer to: https://github.com/reduxjs/rtk-convert-todos-example

Conclude

So above I introduced a method to build reactjs applications using redux. With Redux toolkit, the amount of code will be extended vertically instead of horizontally compared to the old architecture. The article above applies to a small application that has not touched middleware yet. But the next article I will show you how to integrate with more complex applications.

Refer

The above article is his experimental and summarized, for those who want to learn the full version can be read at the docs of react toolkit: https://github.com/reduxjs/redux-toolkit/blob/master/docs/ tutorials / intermediate-tutorial.md

Share the news now

Source : Viblo