Skip to content

Latest commit

 

History

History
155 lines (121 loc) · 4.17 KB

README.md

File metadata and controls

155 lines (121 loc) · 4.17 KB

hooks-higher-order-reducers

NPM Version Build Status License Coverage Status Known Vulnerabilities Downloads dependabot

This is a hook version of redux-higher-order-reducers

https://redux.js.org/recipes/structuring-reducers/reusing-reducer-logic

How to use the reusable reducers ...

JS Docs

Currently, there is stringReducer, booleanReducer, listReducer and objectReducer and numberReducer...

useReducer Hook

List Reducer Actions

  • addItemAction - add item to list (end).
  • addItemsAction - add items to list (end).
  • insertItemAction - insert item into list at given index.
  • removeItemAction - remove item from list at given index.
  • removeItemByKeyAction - remove item from list by "key".
  • updateItemAction - update item at given index.
  • updateItemByKeyAction - update item by "key".
  • updateItemsByKeyAction - update items by "key".
  • updateValueAllItemsAction - update key/value pair(s) on all items.
  • setListAction - completely use new state and override current.
addItemAction({ 
    item: { id: 1 },
})

addItemsAction({ 
    items: [ { id: 1 } ],
})

insertItemAction({ 
    item: { id: 1 }, 
    index: 3,
})

removeItemAction({
    index: 3,
})

removeItemByKeyAction({ 
    item: { id: 1 },
    key: "id",
})

updateItemAction({ 
    item: { 
        id: 1, 
        newKey: "newValue" 
    }, 
    index: 3,
})

updateItemByKeyAction({ 
    item: {
        id: 1, 
        foo: "bar" 
    },
    key: "id",
})

updateItemsByKeyAction({ 
    items: [ 
        {
            id: 1, 
            foo: "bar" 
        }, 
        {
            id: 2, 
            cool: "beans" 
        },
    ],
    key: "id",
})

updateValueAllItemsAction({ 
    keyValuePairs: {
        foo: bar,
        updated: true,
        collapsed: true,
    }
})

setListAction({ 
    payload: [],
})

Object Reducer Actions

  • updateObjectAction - update object key/value, can pass multiple key/value pair.
  • setObjectAction - completely use new state and override current.
updateObjectAction({ 
    payload: { loading: true }, 
})

resetObjectAction()

setObjectAction({ 
    payload: {},
})

String Reducer Actions

  • setStringAction - completely use new state and override current.
setStringAction({ 
    string: "foo bar",
})

Boolean Reducer Actions

  • setBooleanAction - completely use new state and override current.
  • toggleBooleanAction - toggle the state of the boolean.
setBooleanAction({ 
    payload: true,
})

toggleBooleanAction()

Number Reducer Actions

  • incrementNumberAction - increment number.
  • decrementNumberAction - decrement number.
  • setNumberAction - set number.
incrementNumberAction()

decrementNumberAction()

setNumberAction({ 
    number: 100,
})

Each reducer, consider it like a micro service, it does one thing and one thing well.