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!

import {Store, storeManager} from 'mflux';


/**
 * 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
 class IncrementDecrementStore extends Store {
   // Initial state
   state = {
     value: 0
   };

   constructor(config) {
     super(config);

     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({ id: '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 'mflux';


/**
 * 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
 class UndoStore extends Store {
   // Initial state
   state = {
     value: 0
   };

   previousStates = [];

   constructor(config) {
     super(config);

     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({id: '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}