Use React Hooks for flexibility, not maintained for years.
ModulaJS is created to provide an intuitive and simple way of manage complex state. It introduces Model (an immutable tree) to represent the application state tree. Both actions and reactions are handled inside Model, as well as the communications and side effects. It makes the components in view layer very simple, pure and stateless.
ModulaJS works perfectly with React, or any other view library, or vanilla JavaScript.
ModulaJS is inspired by Elm and Redux, and built upon redux. Most redux middlewares and the redux dev tools should work seamlessly with ModulaJS.
Prerequisites: Node.js (>=6.0), npm version 3+.
yarn add modulajsOr use NPM
npm install --save modulajsTaking the counter example in redux, the following code implements a ModulaJS version.
The whole state is stored in Model tree of the single store, and the ONLY way to mutate a state is dispatching an action in model sender. The receiver, which handles the corresponding reaction, usually appear in pair of the sender, in the same Model class.
// counter_model.js
import { createModel, createConstants } from 'modulajs';
import PropTypes from 'prop-types';
export const ActionTypes = createConstants('COUNTER', {
INCREMENT: null,
DECREMENT: null
});
export const CounterModel = createModel({
displayName: 'CounterModel',
propTypes: {
value: PropTypes.number.isRequired
},
defaults: {
value: 0
},
sendIncrement() {
this.dispatch({ type: ActionTypes.INCREMENT });
},
recvIncrement() {
return {
type: ActionTypes.INCREMENT,
update(model) {
const newModel = model.set('value', value => value + 1);
return [ newModel ];
}
};
},
sendDecrement() {
if (this.get('value') > 0) {
this.dispatch({ type: ActionTypes.DECREMENT });
}
},
recvDecrement() {
return {
type: ActionTypes.DECREMENT,
update(model) {
const newModel = model.set('value', value => value - 1);
return [ newModel ];
}
};
}
});
// app.js
import { createStore } from 'modulajs';
import { CounterModel } from './counter_model';
// Create a ModulaJS store to hold state in the decorated model
const store = createStore(CounterModel);
// Subscribe to store changing, then notify the listeners
store.subscribe(() => {
console.log('Store has changed. The new state is:', store.getState());
});
// Bootstrap the state tree in root model
store.getState().sendInit();
// Dispatch an action with a model instance
// This is the ONLY way to mutate a state in the Store.
const getCounterModel = () => store.getState().get('decoratedModel');
getCounterModel().sendIncrement();
getCounterModel().get('value'); // 1
getCounterModel().sendDecrement();
getCounterModel().get('value'); // 0Please read our contributing guide for details on how to contribute to our project.