Nougat Predominant Middleware

    reducers-creator

    1.0.1 • Public • Published

    Reducers Creator

    If you want to use it in redux projects, please look at this package: Redux Cool

    Description

    Reducers Creator is an awesome tiny javascript package that allows you to easily and intuitively create reducer functions. Mainly used to create redux reducers. See: Redux Cool

    Installation

    npm install reducers-creator

    Getting Started

    Create a file named src/accountReducer.js

    src/accountReducer.js

    import reducersCreator from "reducers-creator"
    
    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 for the test, you can use Redux, but in this doc, we will create a custom createStore function for testing.

    To easily create actions, please install Actions Creator library

    npm install actions-creator

    Create a file named src/test.js

    src/test.js

    import accountReducer from "./accountReducer.js"
    import actionsCreator from "actions-creator"
    
    // Store Creator Function
    function createStore(reducer) {
        let prevState
        let currentState = reducer()
        return {
            dispatch(action) {
                prevState = currentState
                currentState = reducer(currentState, action)
            },
            getState() {
                return currentState
            },
            getPrevState() {
                return prevState
            }
        }
    }
    
    // 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
    //     }
    // }

    API

    reducersCreator(name, initialState, reducerTree)


    • name <String> name of the reducer, it can be any String
    • initialState <Object> initial state of the reducer, it can be any Object
    • reducerTree <Object> 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.

    Maintainers


    License

    MIT

    Install

    npm i reducers-creator

    DownloadsWeekly Downloads

    9,581

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    13

    Last publish

    Collaborators

    • ruben_arushanyan