Action->Dispatch->Services->Store flow
npm install --save adssimport{createLogic}from'adss'constlogic=createLogic()You can set initial state, your own services and servicesFactories:
import{createLogic,services,servicesFactories}from'adss'constinitialState={}constmyServices={
...services,log: (text)=>console.log(text)}constmyServicesFactories={
...servicesFactories,logState: (services,dispatchContext)=>{dispatchContext.myCounter=1return()=>console.log(dispatchContext.myCounter,dispatchContext.getState())}}constlogic=createLogic(initialState,myServices,myServicesFactories)logic.getState()constaction=actions.action1(value1,value2)logic.dispatch(action)Action is a function that call available services
constactionX=(services)=>{const{ getState, setState, dispatch, serviceX, ...otherServices}=servicesconststate=getState()setState((state)=>({...state,v1: arg1}))dispatch(actionY)//dispatch another actionserviceX()//call your own service}For create actions use HOF:
constinitValue=()=>({ setState })=>{setState((state)=>({...state,v1: 0}))}constincrementValue=(v)=>({ setState })=>{setState((state)=>({...state,v1: state.v1+v}))}constmultiplyValue=(v)=>({ setState })=>{setState((state)=>({...state,v1: state.v1*v}))}constincMultValue=(inc,mult)=>({ dispatch })=>{dispatch(incrementValue(inc))dispatch(multiplyValue(mult))}constincMultValueOnce=(inc,mult)=>({ hold })=>{hold(({ dispatch })=>{dispatch(incrementValue(inc))dispatch(multiplyValue(mult))})}You can use callback if you want to change something each time when store changed
constonStateChangeCallback=(state)=>conslole.log(state)logic.subscribe(onStateChangeCallback)Callback will help if we need rerender something in view each time when state change
constonStateChangeCallback=(state)=>conslole.log(state)logic.subscribe(onStateChangeCallback)// dispatch any actionslogic.unsubscribe(onStateChangeCallback)It is proposed to use one file to aggregate logic of one area of the business logic. This file contains:
- Updater
- Selectors
- Actions
- Init Action
exportconstupdater=(reducer)=>(store)=>({...store,moduleX: reducer(store.moduleX)})This is HOF that describe how to update main store. It get global state and return new one with changed only one part. You can use immutable js or other libraries for implement this
exportconstselector=(store)=>store.moduleXexportconstselectPartXSum=(store)=>store.moduleX.v1+store.moduleX.v2This function describe how to select part from the main store. You can use reselect or other libraries for implement this
conststateAction=(reducer)=>({setState})=>setState(updater(reducer))constincrementValue=(v)=>stateAction((state)=>({...state,v1: state.v1+v}))constmultiplyValue=(v)=>stateAction((state)=>({...state,v1: state.v1*v}))constincMultValue=(inc,mult)=>({ dispatch })=>{dispatch(incrementValue(inc))dispatch(multiplyValue(mult))}constincMultValueOnce=(inc,mult)=>({ hold })=>{hold(({ dispatch })=>{dispatch(incrementValue(inc))dispatch(multiplyValue(mult))})}These is action creators that return actions. Action use defined services for change state
constinit=()=>stateAction((state)=>({...state,v1: 0}))This is init action creator. You should dispatch it when init application
import{createLogic}from'adss'import{moduleX}from'./moduleX'constlogic=createLogic()logic.dispatch(moduleX.init())constrender=(state)=>{//rerender view}logic.subscribe(renderer)logic.dispatch(actions.initValue())// render call oncelogic.dispatch(actions.incMultValue(2,5))// render call twice// because setState service will call twicelogic.dispatch(actions.incMultValueOnce(2,5))// render call once// because 'setState' service held by 'hold' serviceUse npm module react-adss
todo
MIT