redux-modules
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
Getting Started
Install
npm install redux-modules --save
Usage Example
Here's an example of a simple todo app. First create a module that allows todos to be created and destroyed.
src/modules/todos.js
;;; ; name: 'todos' initialState: todos: state transformations: create: middleware: middleware state destroy: middleware: middleware state ;
Once the module is complete, the reducer has to be added to the store.
src/App.jsx
const store = ; const App = <Provider store=store> <Todos ...props/> </Provider>
Alternatively, use 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.
src/views/Todos.jsx
;;; @ static propTypes = todos: array actions: ;
That's it! Check the documentation for comparisons with idiomatic Redux, in depth examples, and advanced usage.
Documentation
- Motivation
- Basic Concepts
- Recipes
- API Reference
- Tooling