Skip to content

Repository files navigation

ADSS

Action->Dispatch->Services->Store flow

Installation

npm install --save adss

API

createLogic(initState, services, servicesFactories)

import{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()

logic.getState()

logic.dispatch(action):

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))})}

logic.subscribe(callback)

You can use callback if you want to change something each time when store changed

constonStateChangeCallback=(state)=>conslole.log(state)logic.subscribe(onStateChangeCallback)

logic.unsubscribe(callback)

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)

How organize business logic of the application

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

Updater part of the module X

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

Selectors part of the module X

exportconstselector=(store)=>store.moduleXexportconstselectPartXSum=(store)=>store.moduleX.v1+store.moduleX.v2

This function describe how to select part from the main store. You can use reselect or other libraries for implement this

Actions part of the module X

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

Init actions part of the module X

constinit=()=>stateAction((state)=>({...state,v1: 0}))

This is init action creator. You should dispatch it when init application

Combine modules of the bussines logic

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' service

Connect to React

Use npm module react-adss

Write custom services

todo

License

MIT

About

Action->Dispatch->Services->Store flow

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages