Predictable state manager with zero boilerplate, where actions are just functions with built-in support for asynchronous operations and promises. It can be described in the three fundamental principles of Redux but requires less boilerplate while let you to focus in application related concerns.
// initialize state manager// action// execute actionsstateManager.doincrement, 1.then
The three fundamental principles of Redux
- Single source of truth
- State is read-only
- Changes are made with pure functions
My team needed to quickly adopt a predictable state manager. Since the adoption of Redux requires to deal with Actions, Actions Creators, Reducers, Combined Reducers, Middlewares, and a few more clever-named concepts, most of them comming from functional programming. I thought such adoption would be faster if we introduce a tool that sinthetizes those 3 fundamental principles in something more simple, with boring names, and less boilerplate.
Managex it just about a State Manager and plain functions called Actions .
The state manager
The state manager holds the appliction state. It is the responsible of updating the application state by wrapping the actions execution, and notifying to the listeners after each state update.
Reacting to state changes
The state can be observed by subscribing a listener to the state manager.
subscribe method returns a function that will unsubscribe the added listener if executed.
Actions are plain functions that receives the state as the first argument. The rest of arguments are passed trough
will methods of the state manager.
sm.doadd, 3// sm.getState().count == 4
will method returns a functions that commits the provided action when executed.
deferredAction // execute// sm.getState().count == 4
Promises and asynchronous actions
Actions can be asynchronous or return a Promise. The state manager will handle either case updating the state when appropiated.
Usage with React
Managex comes with built-in React integration. It has few primitives:
Provider, is a React component that takes a state manager and injects it to each descendant through React contexts.
Observers are React components aware of the state manager.
Observers you need to implement a special method called
mapState that tells how to transform the application state to the React component state. Example:
StateManager instance in provided as a property in each observer component. It can be referenced as
// action// component// observerReactDOM.render,document.getElementById'app-root'
Managex is very simple and flexible enough to be adapeted to your application requirements. Executing several actions with Managex is just about composing functions.
sm.doaddAndMult, 2, 3
Custom action execution
Managex lets you customize the way actions are executed. The custom action executor can be provided at the time of instancing a new state manager. The default
executeAction implementation looks like the following:
// providing the action executor
Example of providing a custom action executor with crash reporting:
// custom action executor
Alternatively you can make the
MIT (c) Yosbel Marín