DEV Community: React JS Fan

Redux-Cool Philosophy. How to solve the main problems which we usually face when we use Redux in complex projects.

React JS Fan — Wed, 28 Apr 2021 18:15:38 +0000

In this article, I am talking about the main problems which we usually face when we use Redux in complex projects. I will also talk about the new Redux-Cool library, with the help of which we can solve those problems. I'm convinced that many developers using Redux need a similar article.

Motivation

As we know Redux is a predictable state container for JavaScript apps. Below you can find the architecture of Redux.

As can be seen from the diagram above, we have a store where our state data is stored, and if we want to change something in the state, we must create an action object which will contain all the information on how we need to change the state. Afterward, we need to dispatch the action object to the reducer. The reducer must receive the action object and based on that it will figure out what to change and how to make that change. This is how the state management works in Redux. Redux as a state management concept is really good because it is predictable - we are not changing the state directly.

As we have already mentioned, Redux is very good as a state management concept, however, when we try to realize it in real and complex projects, we encounter numerous problems and headaches which is why many developers refuse to use Redux.

ReduxToolkit tried to solve these problems but with no result.

I created the Redux Cool to solve all of these problems.

Problems

Below are the main problems which we usually face when we use Redux in complex projects.

Problem 1: Confusion and Boredom

In many projects that have various features, there are many cases when it is required to change the state during some actions. We have to create a new action type every single time, to add an action handler for that in reducer, every time we have to import the appropriate action creator, create action and dispatch it. This is quite a boring process. Besides, we have many action creators and action handlers, which are just written one under another and not grouped in logical and visual form.

Solution:

In Redux Cool, the reducers are created with the help of a reducer tree - the reducer tree is a nested javascript object in which action-handler functions are defined. Each action-handler has its logical place in the reducer tree. The hierarchical order of action-handlers enables us to define reducer-logic in a grouped and visual form.

Besides, in Redux Cool, we don't have a separate action creator function for each action, instead, we have one actionsCreator action producer with which we can create any action object in dynamic and inline ways.

See details:

Problem 2: Define a Single Action In Multiple Reducers

In complex projects, we are usually splitting our reducer functions into separate reducer functions, each managing independent parts of the state. Then, using the combineReducers function of Redux, we are combining it creating one general reducer function. Very often, there is a need to have specific types of actions, which we would like to apply simultaneously to all reducers or to specific reducers. For example, when we have LOGOUT action and during that action, we want to erase all the account-specific data that exists in our Redux state.

Solution:

The actions have Global and Local contexts in Redux Cool. The actions with Global context can be applied to various Reducers.

See details:

Global And Local Actions

Problem 3: Actions With Callback capability

Usually, when we are using Redux Middlewares for side effects(e.g. redux-saga), there is a need to have actions with Callback capability.

Solution:

In Redux Cool, all the actions have Callback capability - by default, it is an identity function(x => x) but we can pass any callback function during the creation of action.

See details:

Actions Creator

Redux Best Practice 2021 - Redux Cool

React JS Fan — Wed, 14 Apr 2021 18:38:35 +0000

Build redux logic, without getting nervous ❤️

Redux Cool is an awesome tiny package that allows you to easily and intuitively write redux logic. It is the collection of two separate libraries, one designed to create reducer functions and the other to create action objects: (Reducers Creator for creating reducers functions and Actions Creator for creating actions object)

Installation

npm install redux redux-cool

Getting Started

Create a file named src/accountReducer.js

src/accountReducer.js

import {reducersCreator} from "redux-cool"

const initialState = {
    profile: {
        data: null
    }
}

const reducerTree = {

    PROFILE: {

        SET: (state, action) => {
            const [data] = action.args
            state.profile.data = data
        },

        UPDATE_EMAIL: (state, action) => {
            const [email] = action.args
            state.profile.data.email = email
        }
    },

    CLEAR: (state, action) => {
        state.profile.data = null
    }

}

const accountReducer = reducersCreator(
    "ACCOUNT",
    initialState,
    reducerTree,
)

export default accountReducer

As you can see in the example above, we create an accountReducer by calling the reducersCreator function and passing it three arguments:

"ACCOUNT" : It's the name of the reducer, it can be any String
initialState : It's the initial state of the reducer, it can be any Object
reducerTree : It's an Object (can have any deep and nested structure) that intuitively and in readible ways, defines handler functions for reducer. Handler functions as an argument take state and action and update the state. It automatically uses the immer library to do immutable updates with normal mutative code, like state.profile.data.email = email. There is no need to manually do immutable updates and return the result. If you are not familiar with the immer library, please look at it, it is very important.

As a result, we get the accountReducer function, which can handle the following type of actions:

types: "PROFILE/SET" or "ACCOUNT/PROFILE/SET"
types: "PROFILE/UPDATE_EMAIL" or "ACCOUNT/PROFILE/UPDATE_EMAIL"
types: "CLEAR" or "ACCOUNT/CLEAR"

As you can see, each handler can work with two types of actions, one consisting of the path described in reducerTree, the second is the same as the first type plus the reducer name that should be added from the beginning like "CLEAR" and "ACCOUNT/CLEAR". That is the most important and useful feature of this library.

In both cases (`"CLEAR"` and `"ACCOUNT/CLEAR"`), the CLEAR handler is called in the accountReducer, but when we have multiple reducers that have the CLEAR handler and we need to clear the state of all reducers, we must use `"CLEAR"` action type, but if we need to delete only the ACCOUNT reducer state we must use the `"ACCOUNT/CLEAR"` action type.

Now that we have the accountReducer, let's create the redux store

Create a file named src/store.js

src/store.js

import {createStore} from "redux"
import {actionsCreator} from "redux-cool"
import accountReducer from "./accountReducer.js"

// Create Store
const store = createStore(accountReducer)

// Dispatch Set Profile Action
store.dispatch(actionsCreator.PROFILE.SET({
        email: 'test@test',
        name: 'Test'
    })
)
console.log(store.getState())
// {
//     profile: {
//         data: {email: 'test@test', name: 'Test'}
//     }
// }


// Dispatch Update Email Action
store.dispatch(actionsCreator.PROFILE.UPDATE_EMAIL('test2@test2'))
console.log(store.getState())
// {
//     profile: {
//         data: {email: 'test2@test2', name: 'Test'}
//     }
// }



// Dispatch Clear Email Action
store.dispatch(actionsCreator.CLEAR())
console.log(store.getState())
// {
//     profile: {
//         data: null
//     }
// }

DEV Community: React JS Fan

Redux-Cool Philosophy. How to solve the main problems which we usually face when we use Redux in complex projects.

Motivation

Problems

Problem 1: Confusion and Boredom

Solution:

Problem 2: Define a Single Action In Multiple Reducers

Solution:

Problem 3: Actions With Callback capability

Solution:

Redux Best Practice 2021 - Redux Cool

Build redux logic, without getting nervous ❤️

Installation

Getting Started

Resources