Repository: reduxjs/redux

Issue #822: How to create a generic list as a reducer and component enhancer?
Created: 2015-09-30T04:53:58Z
Hello. What would be a good way to extend the counter example to a dynamic list of independent counters?
By dynamic I mean that in the UI at the end of the list of counters there would be + and - buttons for adding a new counter to the list or removing the last one.
Ideally the counter reducer and component would stay as they are. How would one create a generalized list store+component to collect any kind of entities? Would it be possible to generalize the list store+component even further to take both counters and todo-items from the todomvc-example?
It would be great to have something like this in the examples.

Duplicate issue #897: how to compose redux reducers with the same actions?
Created: 2015-10-14T07:33:57Z
I'm just getting started with redux and it looks amazing, but I'm a little worried about abstraction.
Suppose I have a really simple input component
inputReducer = function(state='', action) {
  if (action.type === 'ON_CHANGE') {
    return action.value
  }
  return state
}

inputOnChangeAction = function(e) {
  return {
    type: 'ON_CHANGE',
    value: e.target.value
  }
}
Now its trivial to hook this up to a component with an input.
reducer = combineReducer({
  username: inputReducer
})
But what happens when I have more than one input?
reducer = combineReducer({
  username: inputReducer
  password: inputReducer
})
Ok, I suppose we could change the action type to specify which input its referring too.
inputReducer = name => (state='', action) => {
  if (action.type === 'ON_CHANGE_'+name.toUpperCase()) {
    return action.value
  }
  return state
}

inputOnChangeAction = name => (e) => {
  return {
    type: 'ON_CHANGE_'+name.toUpperCase(),
    value: e.target.value
  }
}

reducer = combineReducer({
  username: inputReducer('username')
  password: inputReducer('password')
})

But now suppose I place two of the same views side-by-side? Now I need to modify the action yet again to specify which input in which view I'm referring to.
inputReducer = index => name => (state='', action) => {
  if (action.type === 'ON_CHANGE_'+name.toUpperCase()+'['+index+']') {
    return action.value
  }
  return state
}

inputOnChangeAction = index => name => (e) => {
  return {
    type: 'ON_CHANGE_'+name.toUpperCase()+'['+index+']',
    value: e.target.value
  }
}

reducer = function(state:[{username:'', password:''},{username:'', password:''}], action) {
  return state.map({username, password}, index) => {
    return {
      username: inputReducer(index)('username')(username)
      password: inputReducer(index)('password')(password)
    }
  }
}

Oy vey. Whats tough about this is that the input reducer somehow needs to know about how the rest of the app is structured. That just doesnt seem right. Ideally we would be able to abstract out the input's actions and reducers based on how the parent decides to arrange them. I suppose we could do this with a high-order function. But this is all getting pretty tedious. Am i missing something? How are you dealing with this?

Closing comment (2015-10-14T23:39:43Z): I think this is pretty much the same as #822.
You can get full reusability with more strict Elm-like architecture, but this is incompatible with middleware so you need to choose which is more important to you.