Mflux
Multiple stores object oriented state management for JavaScript applications
Features
- It runs in different environments
- ES6 as a source.
- It is tiny
Influences
Mflux evolves the ideas of Redux but favors an object oriented methodology that allows to build reusable stores that encapsulate the state of a specific component instead of the whole application, therefore coming back to some of the original Flux ideas
Installation
To install the stable version:
npm install --save mflux
This assumes you are using npm as your package manager.
Mflux is available as a collection of CommonJS modules. These modules are what you get when you import mflux
in a Webpack, Browserify, or a Node environment.
Complementary Packages
Most likely, you'll also need the React bindings
npm install --save react-mflux
The Gist
The whole state of every component is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.
That's it!
; /** * This is a class that extends the abstract store provided by mflux * The actions and the reducer are encapsulated inside the store, so the client * does not know about dispatch and the reducer, therefore encapsulating those inside the store */ // Extend from mflux store // Initial state state = value: 0 ; { superconfig; thisincrement = thisincrement; thisdecrement = thisdecrement; } { this; } { this; } { } // Instantiate the store, if you want to track the store with the store manager provide a unique identifier for that store let store = id: 'testStoreId'; console // The initial state. It should log Object {value: 0} // Subscribe to the store store; store; // It should log Object {value: 1} store // It should log Object {value: 0}
Let's have another example of a store that can undo the previous set value
; /** * This is a class that extends the abstract store provided by mflux * The actions and the reducer are encapsulated inside the store, so the client * does not know about dispatch and the reducer, therefore encapsulating those inside the store */ // Extend from store // Initial state state = value: 0 ; previousStates = ; { superconfig; thissetValue = thissetValue; thisundo = thisundo; } { this; } { this; } { // No memoizing for simplicity let { thispreviousStates; // Push the old state into the previous states return value; }; let { return thispreviousStatesvalue; // No checking of empty state for simplicity } } let store = id: 'testStoreId2'; let value; store; console // The initial state. It should log Object {value: 0} store; // It should log Object {value: 5} store; // It should log Object {value: 10} store; // It should log Object {value: 5} sstore; // It should log Object {value: 0}