modflux v0.1.1
Modflux
Multiple stores object oriented state management for JavaScript applications
Features
- It runs in different environments
- ES6 as a source.
- It is tiny
Influences
Modflux 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 modflux
This assumes you are using npm as your package manager.
Modflux is available as a collection of CommonJS modules. These modules are what you get when you import modflux
in a Webpack, Browserify, or a Node environment.
Complementary Packages
Most likely, you'll also need the React bindings
npm install --save react-modflux
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!
import {Store, storeManager} from 'modflux';
/**
* This is a class that extends the abstract store provided by modflux
* 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 modflux store
class IncrementDecrementStore extends Store {
// Initial state
state = {
value: 0
};
constructor(storeId) {
super(storeId);
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);
}
increment() {
this.dispatch({
type: 1
});
}
decrement() {
this.dispatch({
type: 2
});
}
reducer(action) {
switch (action.type) {
case 1: return { value: this.state.value + 1 };
case 2: return { value: this.state.value - 1 };
default: throw new Error(`Invalid action type: ${action.type}`);
}
}
}
// Instantiate the store, if you want to track the store with the store manager provide a unique identifier for that store
let store = new IncrementDecrementStore('testStoreId');
console.log(store.state.value) // The initial state. It should log Object {value: 0}
// Subscribe to the store
store.subscribe(state => console.log(state.value));
store.increment(); // It should log Object {value: 1}
store.decrement() // It should log Object {value: 0}
Let's have another example of a store that can undo the previous set value
import {Store, storeManager} from 'modflux';
/**
* This is a class that extends the abstract store provided by modflux
* 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
class UndoStore extends Store {
// Initial state
state = {
value: 0
};
previousStates = [];
constructor(storeId) {
super(storeId);
this.setValue = this.setValue.bind(this);
this.undo = this.undo.bind(this);
}
setValue(value) {
this.dispatch({
type: 1,
value: value
});
}
undo() {
this.dispatch({
type: 2
});
}
reducer(action) {
// No memoizing for simplicity
let setNewValue = (value) => {
this.previousStates.push(this.state); // Push the old state into the previous states
return value;
};
let getPreviousValue = () => {
return this.previousStates.pop().value; // No checking of empty state for simplicity
}
switch (action.type) {
case 1: return { value: setNewValue(action.value) };
case 2: return { value: getPreviousValue() };
default: throw new Error(`Invalid action type: ${action.type}`);
}
}
}
let store = new UndoStore('testStoreId2');
let value;
store.subscribe(state => value = state.value);
console.log(store.state.value) // The initial state. It should log Object {value: 0}
store.setValue(5); // It should log Object {value: 5}
store.setValue(10); // It should log Object {value: 10}
store.undo(); // It should log Object {value: 5}
sstore.undo(); // It should log Object {value: 0}