react-monostore
React bindings for monostore
Features
monostore | redux | |
---|---|---|
Provider element | ✓ | |
Action Dispatcher | ✓ | |
Action Creator | ✓ | |
Reducer | ✓ | |
Middleware | ✓ | |
connect() HOC | ✓ | |
Async Action | ✓ | |
Async State | ✓ | |
Computed State | ✓ | |
Lazy State | ✓ | |
State dependency | ✓ | |
Free Action Dispatching | ✓ | |
Multiple Stores | ✓ | |
State Mutation Helpers | ✓ | |
Action Dispatching Tracking | ✓ |
Table of contents
Getting started
Unlike other state managers, monostore does not store whole app state in a single store, instead monostore splits your app state into multiple states. You can mutate state via an action. Take a look at the Counter example below
import createState createAction from "monostore"; // create single state with default value 1const CounterState = ; // the value prop contains current value of stateconsole; // 1 // create action to mutate CounterState, the action retrieves state accessor list// you can add multiple dependency states as you want// createAction([State1, State2, ...], (stateAccessor1, stateAccessor2, ...) => {})const Increase = ; // just invoke Increase like normal function; console; // 2
You can pass arguments to action easily like normal function
import createState createAction from "monostore"; const CounterState = ; // extra arguments follow input state accessor listconst Increase = ; ;console; // 3 ;console; // 4
monostore supports async function by default
import createState createAction from "monostore"; const CounterState = ; const Increase = ; // a promise returned and we should wait until action executed;
Remember that an action returns exactly what you returned inside action body, it can be anything, primitive values, objects, promises
If you feel it difficult to mutate state by using builtin getter and setter, monostore provided some useful helpers for you
import createState createAction from "monostore"; const NumberState = ;const DateState = ;const StringState = ;const BooleanState = ;const ArrayState = ;const ObjectState = ; const Update = ; ;
Using monostore with React
Let take a look sample of React Todo App
import createState createAction from "monostore";import useStates from "react-monostore";import React from "react";import render from "react-dom"; const NameState = ;const UpdateName = ; const App = const name = ; { ; } return <div> <input ="text" = = /> <p>Hello name</p> </div> ;; ;
Using useStates to extract state value from specified state. You can pass multiple states to useStates then receive array of state value We can reduce many code lines for above example, a shorter version can be
import createState from "monostore";import useStates from "react-monostore";import React from "react";import render from "react-dom"; const NameState = ; const App = const name = ; { ; } return <div> <input ="text" = = /> <p>Hello name</p> </div> ;; ;
You can update state directly by invoking state as function and passing new value.
Is that pretty short ? Even we can reduce more
import createState from "monostore";import useStates from "react-monostore";import React from "react";import render from "react-dom"; const NameState = ; const App = const name = ; return <div> <input ="text" = = /> <p>Hello name</p> </div> ;; ;
State is smart enough to process synthetic event without any effort.