Socket
Socket
Sign inDemoInstall

create-reducer-tree

Package Overview
Dependencies
1
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    create-reducer-tree

A tool to create a redux reducer composition tree


Version published
Maintainers
1
Install size
52.6 kB
Created

Readme

Source

Create-reducer-tree

This library is created to help you with creating large reducer trees (Hierachical reducer composition). Reducers and reducer-composition are principles from Redux.

Let's say that when you have a 3 levels of reducers in a hierachical order, you have to create parentreducers for that. Those reducers should only return a new state based on matching actions.

Installing

npm install create-reducer-tree

Usage

import it

import {createReducerTree} from "create-reducer-tree";

You will have to create some kind of reducerTree that looks like this: At the deepest level we always define actions and one reducer.

let reducerComposer: any = {
    groceryManagement: {
        data: {
            groceries: {
                initialState: [],
                actions: ["GROCERIES"],
                reducer: groceriesReducer
            }
        },
        container: {
            currentList: {
                initialState: null,
                actions: ["CURRENTLIST", "CURRENTLIST2"],
                reducer: currentListReducer
            }
        }
    },
    listManagement: {
        data: {
            lists: {
                initialState: [],
                actions: ["LISTS"],
                reducer: listsReducer
            }
        },
        container: {
            groceryListsEdit: {
                initialState: {list: null},
                actions: ["GROCERYLISTSEDIT"],
                reducer: groceryListsEditReducer
            }
        }
    },
    common: {
        container: {
            application: {
                initialState: {isBusy: false},
                actions: ["APPLICATION"],
                reducer: applicationReducer
            },
            collapsableSidebar: {
                initialState: {isCollapsed: false},
                actions: ["COLLAPSABLESIDEBAR"],
                reducer: collapsableSidebarReducer
            }
        }
    }
};
let store = createReducerTree(reducerComposer);

When ACTION1 or ACTION2 is sent to the store we can not update the reference of groceryManagement > container.

When ACTION1, ACTION2, ACTION3 or ACTION4 is sent to the store we can not update the references of listManagement > data, listManagement > container, common > container.

This results in the fact that we have to create reducers for every hierarchical step, so the reducers are called correctly based on actions.

This is what this tiny piece of code is all about. When using createReducerTree we do not have to create the following reducers anymore:

  • groceryManagementReducer
  • groceryManagementDataReducer
  • groceryManagementContainerReducer
  • listManagementReducer
  • listManagementDataReducer
  • listManagementContainerReducer
  • commonReducer
  • commonContainerReducer
  • commonCollapsableSidebarReducer
Writing the reduces above can take a lot of time to write/unittest/maintain.

This is an example of a reducer that we had to write before to optimize the tree.

export function groceryManagementReducer(state: GroceryManagementState = {data:{...}}, action: Action): GroceryManagementState {
    switch (action.type) {
        case "ACTION1":
        case "ACTION2":
        case "ACTION3":
        case "ACTION4":
            return {
                data: dataReducer(state.data, action),
                container: containerReducer(state.container, action)
            }
    }
    return state;
}

Keywords

FAQs

Last updated on 12 May 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc