redux-modules is a refinement on the Redux module concept with developer experience in mind. It provides:
- A concise, intuitive way to define actions and state transformations
- Action creator middleware for transforming actions before they're dispatched
- A decorator that handles mapping state and actions to components
- A modified Redux Provider that dynamically registers new reducers as connected components mount
npm install redux-modules --save
Here's an example of a simple todo app. First create a module that allows todos to be created and destroyed.
;;;name: 'todos'initialState:todos: statetransformations:create:middleware:middlewarestatedestroy:middleware:middlewarestate;
Once the module is complete, the reducer has to be added to the store.
const store = ;const App =<Provider store=store><Todos ...props/></Provider>
ModuleProvider to allow reducers to be automatically added to the store at runtime.
;const store = ;const App =<ModuleProvider store=store><Todos ...props/></ModuleProvider>
The last step is to connect the module to the view. This works like a normal Redux
connect with the added bonus of auto dispatching and namespacing actions.
;;;@static propTypes =todos: arrayactions:;
That's it! Check the documentation for comparisons with idiomatic Redux, in depth examples, and advanced usage.