Redux Best Practice 2021 – Redux Cool

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…


This content originally appeared on DEV Community and was authored by React

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
//     }
// }

Resources


This content originally appeared on DEV Community and was authored by React


Print Share Comment Cite Upload Translate Updates
APA

React | Sciencx (2021-04-14T18:38:35+00:00) Redux Best Practice 2021 – Redux Cool. Retrieved from https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/

MLA
" » Redux Best Practice 2021 – Redux Cool." React | Sciencx - Wednesday April 14, 2021, https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/
HARVARD
React | Sciencx Wednesday April 14, 2021 » Redux Best Practice 2021 – Redux Cool., viewed ,<https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/>
VANCOUVER
React | Sciencx - » Redux Best Practice 2021 – Redux Cool. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/
CHICAGO
" » Redux Best Practice 2021 – Redux Cool." React | Sciencx - Accessed . https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/
IEEE
" » Redux Best Practice 2021 – Redux Cool." React | Sciencx [Online]. Available: https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/. [Accessed: ]
rf:citation
» Redux Best Practice 2021 – Redux Cool | React | Sciencx | https://www.scien.cx/2021/04/14/redux-best-practice-2021-redux-cool/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts