Managex
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.
// alternatively
Reacting to state changes
The state can be observed by subscribing a listener to the state manager.
sm.subscribe
The subscribe
method returns a function that will unsubscribe the added listener if executed.
Actions
Actions are plain functions that receives the state as the first argument. The rest of arguments are passed trough do
and will
methods of the state manager.
sm.doadd, 3 // sm.getState().count == 4
The 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.
sm.doadd, 3.then
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.Observer
s are React components aware of the state manager.
To use Observer
s you need to implement a special method called mapState
that tells how to transform the application state to the React component state. Example:
The StateManager
instance in provided as a property in each observer component. It can be referenced as stateManager
.
Example integrating Provider
and Observer
:
// action // component // observer ReactDOM.render , document.getElementById'app-root'
Batching actions
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 executeAction
asynchonous:
MIT (c) Yosbel Marín