1.0.1 • Published 2 years ago
better-reducer v1.0.1
better-reducer
Simplifies reducer management and standardizes it
Before betterReducer
After betterReducer
Getting started
npm install --save better-reducer
or
yarn add better-reducer
then, we can import betterReducer into a reducer file
import { betterReducer } from 'better-reducer'
then, we should define a stateManipulationObjectGenerator function
const stateManipulationObjectGenerator = ({ state, action }) => ({
HANDLE_CONTENT_WIDTH: { contentWidth: action.value },
HANDLE_MENU_COLLAPSED: { menuCollapsed: action.value, domainLayer: domainLayer.HANDLE_MENU_COLLAPSED },
HANDLE_MENU_HIDDEN: { menuHidden: action.value },
HANDLE_RTL: { isRTL: action.value },
HANDLE_SKIN: { skin: action.value }
})
Notice that, we can define domainLayer property if we need. We should separate business logic from other layers. We can define our business logic as a separate object. (or we can import them from another file which is the cleanest way)
const domainLayer = {
HANDLE_MENU_COLLAPSED: async ({ state, action }) => {
let x = 0
await new Promise(resolve => setTimeout(resolve, 5000))
x = action.value / window.currentValue
localStorage.setItem('menuValue', x)
}
}
As you can see, we can define async functions too. But it would be best if you remembered that async functions always return after the redux state update, unlike the synchronous functions.
then we can generate and export reducer
const layoutReducer = (state = initialState, action) =>
betterReducer({ state, action, stateManipulationObject: stateManipulationObjectGenerator({ state, action }) })
export default layoutReducer
Development
yarn
yarn build