Redux-Entry

Middleware for Redux.

Note: the concept is useful, but an extra small package maybe not, consider grab the source code directly, and keep on hacking

At current state, the source code should be good enough for the concept, kind of like Redux. So while this repo is archived, explore for more finer Redux usage should continue.

Definition

Entry is a function that:

• Target one type of action
• Will be called with (store, action), after the action is dispatched, but before it reaches the store reducer
• Can block current dispatched action by return true
• Has access to store. Hence you can access current store state by store.getState(), or dispatch some action by store.dispatch. From there we have some feature like:
  • Block and Redirect action to another action type
  • Dispatch multiple action from one Entry
  • dispatch to another Entry (beware of dead loops)

Usage

import { createReduxEntry, createStateStore, createStateStoreReducer } from 'redux-entry'

ReduxEntry

import { createStore, applyMiddleware, combineReducers } from 'redux'
import { createReduxEntry } from 'redux-entry'

const reducer = (state = {}, action) => state // some sample reducer

const { middleware: reduxEntryMiddleware, setEntry, setEntryMap } = createReduxEntry() // get ReduxEntry instance

// add reduxEntry to middleware
const store = createStore(
  reducer,
  // null, // no initialState
  applyMiddleware(reduxEntryMiddleware)
)

// define some entryFunction
const entryFunction0 = (store, action) => {}
const entryFunction1 = ({dispatch, getState}, {type, payload}) => {}
// and set
setEntry('action-type-to-precess-0', entryFunction0)
setEntry('action-type-to-precess-1', entryFunction1)

// or pack them up
const entryMap = {
  'action-type-to-precess-0': entryFunction0,
  'action-type-to-precess-1': entryFunction1
}
// and set
setEntryMap(entryMap)

createStateStore & createStateStoreReducer

These are packed handy functions to create mini-state-store, if needed to.

mini-state-store can be used to offload Redux store reducer codes.

Suppose we have a store state like this:

const storeState = {
  'mini-state-a': {},
  'mini-state-b': {},
  'mini-state-c': {}
}

and for each mini state, we have reducers like:

const miniStateReducer = (state, action) => {
  if (action.type === 'mini-state:set-key-0') return { ...state, key0: 0 }
  else if (action.type === 'mini-state:set-key-1') return { ...state, key1: 1 }
  else if (action.type === 'mini-state:set-key-2') return { ...state, key2: 2 }
  else return state
}

We might want to 'reduce' the reducer code to a single merge operation:

const miniStateReducer = (state, action) => {
  if (action.type === 'mini-state:update') return { ...state, ...action.payload }
  else return state
}

...and put the each reduce action to one entryFunction:

const entryMap = {
  'mini-state:set-key-0': ({ dispatch, getState }, action) => {
    const miniState = getState()['mini-state-a']
    dispatch({ type: 'mini-state:update', payload: { ...miniState, key0: 0 } })
  },
  'mini-state:set-key-1': ({ dispatch, getState }, action) => {
    const miniState = getState()['mini-state-a']
    dispatch({ type: 'mini-state:update', payload: { ...miniState, key1: 1 } })
  },
  'mini-state:set-key-2': ({ dispatch, getState }, action) => {
    const miniState = getState()['mini-state-a']
    dispatch({ type: 'mini-state:update', payload: { ...miniState, key2: 2 } })
  }
}

And with createStateStore and createStateStoreReducer, we get a mini-state-store:

import { createStateStore, createStateStoreReducer } from 'redux-entry'

const initialState = {}
const stateStore = createStateStore(initialState)
const { getState, setState, wrapEntry } = stateStore
const reducer = createStateStoreReducer('mini-state:update', stateStore)
const entryMap = {
  'mini-state:set-key-0': wrapEntry((state, { dispatch }, action) => { dispatch({ type: 'mini-state:update', payload: { ...state, key0: 0 } }) }),
  'mini-state:set-key-1': wrapEntry((state, { dispatch }, action) => { dispatch({ type: 'mini-state:update', payload: { ...state, key1: 1 } }) }),
  'mini-state:set-key-2': wrapEntry((state, { dispatch }, action) => { dispatch({ type: 'mini-state:update', payload: { ...state, key2: 2 } }) })
}

export { stateStore, reducer }

License

MIT. Issues and Pull Requests are welcomed.