architecture comment

[jedwards1211]

Thought you might want to consider this: The solution I've settled on for this kind of thing in my own projects is to use the same reducer and action creator code, but with action types prefixed differently for each reducer mount point, as depicted in the code below. I would love if redux-form worked this way.

It took a long long time before I had the idea to do things this way but once I did I wish I had thought of it at the very beginning.

Advantages:

• it's easier to read the action log since actions for different mount points have different types
• more flexible with mounting reducers in arbitrary, deeper-nested areas of the state
• you can move around where reducers are mounted without having to change state paths used to modify reducers or action creators

Disadvantages:

• it may not be obvious from the action type what part of the state it affects, depending on what action type prefixes you use

I even created prefixReducer and prefixActionCreator functions in my mindfront-redux-utils package to decorate existing reducers and action creators that weren't designed to be created with an action type prefix option.

import {createReducer, combineReducers} from 'mindfront-redux-utils' // or redux-actions etc
import {List} from 'immutable'

const PUSH = 'PUSH'
const POP = 'POP'

function listActions(actionTypePrefix) {
  const pushType = actionTypePrefix + PUSH
  const popType = actionTypePrefix + POP
  return {
    push: (item) => ({type: pushType, payload: item}),
    pop: () => ({type: popType}),
  }
})

function listReducer(actionTypePrefix) {
  return createReducer(List(), {
    [actionTypePrefix + PUSH]: (state, action) => state.push(action.payload),
    [actionTypePrefix + POP]: (state) => state.pop(),
  })
}

const reducer = combineReducers({
  a: listReducer('a.'),
  b: listReducer('b.'),
  c: listReducer('c.'),
  d: combineReducers({
    e: listReducer('d.e.'),
  })
});

const aListActions = listActions('a.')
const bListActions = listActions('b.')
const deListActions = listActions('d.e.')

dispatch(aListActions.push(...))
dispatch(bListActions.pop())
dispatch(deListActions.push(...))
// etc

Example with prefixReducer and prefixActionCreator (which I only really like to do if I'm using 3rd-party reducers/action creators):

import {
  createReducer, combineReducers, prefixReducer, prefixActionCreator
} from 'mindfront-redux-utils'
import {mapValues} from 'lodash'
import {List} from 'immutable'

const PUSH = 'PUSH'
const POP = 'POP'

const push = (item) => ({type: pushType, payload: item})
const pop = () => ({type: popType})
const listActions = {push, pop}

const listReducer = createReducer(List(),    
  [PUSH]: (state, action) => state.push(action.payload),
  [POP]: (state) => state.pop(),
})

const reducer = combineReducers({
  a: prefixReducer('a.')(listReducer),
  b: prefixReducer('b.')(listReducer),
  c: prefixReducer('c.')(listReducer),
  d: combineReducers({
    e: prefixReducer('d.e.')(listReducer),
  })
});

const aListActions = mapValues(listActions, prefixActionCreator('a.'))
const bListActions = mapValues(listActions, prefixActionCreator('b.'))
const deListActions = mapValues(listActions, prefixActionCreator('d.e.'))

dispatch(aListActions.push(...))
dispatch(bListActions.pop())
dispatch(deListActions.push(...))
// etc

[jedwards1211]

In fact, the Redux docs now have an excellent guide on doing this here: https://github.com/reactjs/redux/blob/master/docs/recipes/reducers/ReusingReducerLogic.md

[georgeawwad]

I'm using the Redux guide for creating split reducers, but I'm not sure how to map these as props for a component. The guide above doesn't follow up on this. What's the next step?

[jedwards1211]

@georgeawwad are you looking for react-redux?

[georgeawwad]

Right. I was only asking my question here because your docs link led me to a potential solution with my project. It's not specifically related to this repo.