@binarybutterfly/rematch v0.0.1

Description

A lite state management for React

Installation

npm i @binarybutterfly/rematch -S

Usage

Just wrap the whole App within the facade "Provider", you just pass the models through

import { Provider, useDispatch } from '@binarybutterfly/rematch';

const models = { 
  modelA: { 
    state: { a: 'a', b: 'b' }, 
    reducers: { 
      setState(state, payload) { 
        return { ...state, ...payload } 
      } 
    }, 
    effects: { 
      async test(payload, state) { 
        console.log('this a async effect') 
      } 
    } 
  } 
}

ReactDOM.render(<Provider models={models}><App /></Provider>, root);

function App() {
  const dispatch = useDispatch();

  return <button onClick={() => dispatch.modelA.test()}>test</button>
}

Model

{ modelKey: { state, reducers, effects } }

state

the initial state for model

type

{ [key: string]: any }

reducers

the action reducer for sync actionCreator

type

{ [reducerKey: string]: (prevState, payload) => nextState}

all the reducers for every reducer key turn to the relevant sync action creator, will received the current state of relevant model namespace and the payload of the action dispatched ​

assign the result map of action creators to the dispatcher "dispatch", there will be a convenient for getting the action creator by "dispatchmodelKey"

effects

type

{ [effectKey: string]: (payload, storeState) => any } | (dispatch) => { [effectKey: string]: (payload, storeState) => any }

all the effects for every effect key turn to the relevant async/sync effect, will received the payload of effect dispatched, at the meantime, received the whole state tree of store state ​

assign the result map of effects to the dispatcher "dispatch", there will be a convenient for getting the effect by "dispatchmodelKey"

Hooks

useStore

the container of all state and actions

When provided the model tree, get the state store which wrappers both the whole state and all actionCreates/async effects, even get all loading indicator of each async effects. the loading map is also constructed by model key as a loading tree, is the same constuction with the store state tree.

import { Context, useStore } from '@binarybutterfly/rematch';

const store = useStore(models);
const { state, loading, dispatch } = store;

<Context.Provider value={store}></Context.Provider>

useDispatch

the main method for getting the dispatcher

Get the dispatcher for dispatching sync actions with bound actionCreators or async effects. All the sync actionCreators or async effects wrappered by the model namespace, and all namespaced model attach in the dispatcher.

import { useDispatch } from '@binarybutterfly/rematch';

const dispatch = useDispatch();

dispatch.modelA.actionA(payload);
dispatch.modelA.effectA(payload);

useSelector

a getter for select the inclusive state

When passed a selector getter, return the state by getter(state); when without selector, return the whole store state.

import { useSelector } from '@binarybutterfly/rematch';

const state = useSelector(state => state.modelA);

useLoading

getting the loading indicator(s) for the state-chaning placeholder

When dispatch a async effect, there will be a relevant loading indicator being mutated. Before the efffect calling, the loading indicator turns to "true" and after the calling turns to "false". This is a convenient way for managing the loadings of view. As the same, also is alike the "useSelector", we can pass a selector or not to get the very loading property.

import { useLoading } from '@binarybutterfly/rematch';

const loadings = useLoading(loading => loading.modelA);

loadings.test

Components

Provider

the fasade for Context.Provider, but wrappers the created store of 'useStore'

​

import { Provider } from '@binarybutterfly/rematch';

<Provider models={models}>{children}</Provider>

Consumer

the Context.Comsumer