How to create a generic list as a reducer and component enhancer?

[pe3]

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.

[gaearon]

I agree this is a good example.
Redux is similar here to Elm Architecture so feel free to get inspired by examples there.

[gaearon]

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?

Yes, definitely possible.
You'd want to create a higher order reducer and a higher order component.

For higher order reducer see the approach here:

function list(reducer, actionTypes) {
  return function (state = [], action) {
    switch (action.type) {
    case actionTypes.add:
      return [...state, reducer(undefined, action)];
    case actionTypes.remove:
      return [...state.slice(0, action.index), ...state.slice(action.index + 1)];
    default:
      const { index, ...rest } = action;
      if (typeof index !== 'undefined') {
        return state.map(item => reducer(item, rest));
      }
      return state;
    }
  }
}

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return counter + 1;
  case 'DECREMENT':
    return counter - 1;
  }
}

const listOfCounters = list(counter, {
  add: 'ADD_COUNTER',
  remove: 'REMOVE_COUNTER'
});

const store = createStore(listOfCounters);
store.dispatch({
  type: 'ADD_COUNTER'
});
store.dispatch({
  type: 'ADD_COUNTER'
});
store.dispatch({
  type: 'INCREMENT',
  index: 0
});
store.dispatch({
  type: 'INCREMENT',
  index: 1
});
store.dispatch({
  type: 'REMOVE_COUNTER',
  index: 0
});

(I haven't run it but it should work with minimal changes.)

[pe3]

Thanks - I'll try to get this approach working.

[pe3]

I'm still wondering if I can reuse the list functionality through combineReducers to have both a list of counters and a list of todo-items. And if that would make sense. But I will definitely give it a try.

[gaearon]

I'm still wondering if I can reuse the list functionality through combineReducers to have both a list of counters and a list of todo-items. And if that would make sense. But I will definitely give it a try.

Yes, totally:

const reducer = combineReducers({
  counterList: list(counter, {
    add: 'ADD_COUNTER',
    remove: 'REMOVE_COUNTER'
  }),
  todoList: list(counter, {
    add: 'ADD_TODO',
    remove: 'REMOVE_TODO'
  }),
});

[pe3]

@gaearon how should the list action get its index?

[Zeikko]

We managed to create a higher order reducer with your instructions but we are struggling with the higher order component. Currently our component is not generic enough to be used with other components than Counter. Our issue is how to add the index to the actions in a generic way.

You can see our solution here: Zeikko@6a22288

I added some a comment to the commit to highlight the problematic part.

[pe3]

It would be great to have a have a general list reducer + component who can do a lists of lists of counters.

[gaearon]

Currently our component is not generic enough to be used with other components than Counter. Our issue is how to add the index to the actions in a generic way.

Can you explain what do you mean by “adding the index in a generic way”? Do you mean that you want to have different names for index key in the action?

[gaearon]

I think I get what you mean now.

[pe3]

Sorry I'm not able to comment much just now. I'll get back tomorrow.

[gaearon]

I understand the problem now. Looking into it.