slex-store v1.20.4

Slex Store

$ npm install slex-store

slex-store is a uni directional, predictable state container inspired by the ideas of flux and redux.

Pipeline

The uni directional flow refers to the action pipeline. The pipeline runs in the following sequence and is made up of:

ACTION - actions are dispatched (dispatch(action)) using the dispatcher.

const action = {
  type: 'ACTION_NAME',
  ...
}

↓

REDUCER - actions are then given to a reducer along with the current state of the store. The next state of the store is returned. Immutability is assumed.

  const reducer = (state, action) => {
    return {
      ...state,
      ...
    }
  }

↓

SIDEEFFECT - Side effects are triggered after the action has been reduced into the state. Side effects are aware of the state before and after an action was reduced into the state.

  const sideEffect = ({ prevState, nextState, action, dispatch, getState }) => {
    if (action.type === 'ACTION_NAME') {
      ...
    }
  }

↓

STATE - Finally, subscribers are notified.

Example Usage

import slexStore from 'slex-store'

const createDispatch = slexStore.compose(
  slexStore.createDispatch
)
const createStore = () => slexStore.createStore(
  createDispatch({
    reducer: slexStore.createReducer({
      store: reducer
    }),
    sideEffects: [...]
  })
)
const store = createStore()

store.subscribe((state) => {
  // rerender your app e.g. ReactDOM.render()
})