A single function that returns a reducer, action creators, and action types. This is just a little helper whose is goal is to remove the need of manually making some of the boilerplate, such as constants and action creators.
npm install --save redux-create-module
There's only one function
name is just a string that will be included in the action types.
initialState is, well, the initial state for the module.
handler is where it gets interesting. It's an object where the keys are action names and the values are action handlers. For example:
constcounter=createModule('counter',0,{increment: (state,action)=>state+1,decrement: (state,action)=>state-1})This function returns an object with three things:
actions is an object with action creators. for example: counter.actions.increment() will return {type: 'counter/increment', payload:{} }
reducer is regular reducer that you can pass to the redux store or to combineReducers
types is an object with the generated action types. For example: counter.types.increment is equal to counter/increment This is useful to handle an action from another module. for example, if we wanted to make another module that tracks how many times the counter was incremented:
consttimesIncremented=createModule('timesIncremented',0{[counter.types.increment]: (state,action)=>state+1})// counter.jsimportcreateModulefrom"redux-create-module";constcounter=createModule('counter',0,{increment: (state,action)=>state+1,decrement: (state,action)=>state-1});exportdefaultcounter.reducer;exportconstactions=counter.actions;// actions.increment() ->{type: 'counter/increment', payload:{}}// app.jsimportReactfrom"react";import{connect}from"react-redux";import{actions}from"./counter";constApp=({ count, dispatch })=>(<div>{count}<buttononClick={()=>dispatch(actions.increment())}>Increment</button></div>);exportdefaultconnect(state=>({count: state}))(App);// store.jsimport{createStore}from"redux";importcounterfrom"./counter";letstore=createStore(counter);exportdefaultstore;