List counter using react and redux.

counter.js

import {createStore} from 'redux';
import React from 'react';
import ReactDOM from 'react-dom';

const todoApp = (state = [0], action) => {
  switch (action.type) {
    case 'INCREMENT':
      return [
        ...state.slice(0, action.index),
        state[action.index] + 1,
        ...state.slice(action.index + 1)];
    case 'DECREMENT':
      return [
        ...state.slice(0, action.index),
        state[action.index] - 1,
        ...state.slice(action.index + 1)];
    case 'ADD_COUNTER':
      return [...state, 0];
    default:
      return state;
  };
};

const store = createStore(todoApp);

const Counter = ({
  value,
  onIcrement,
  onDecrement
}) => {
  return(
    <div>
      <h1>{value}</h1>
      <button onClick={onIcrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  );
};

class CounterApp extends React.Component {
  render() {
    return(
        <div>
          {store.getState().map((val,i) => 
            <div>
              <Counter value={val} onIcrement={() =>
                store.dispatch({
                  type: "INCREMENT",
                  index: i
                })
              }
              
              onDecrement={() =>
                store.dispatch({
                  type: "DECREMENT",
                  index: i
                })
              }
              />
            </div>
          )}
        
          <button onClick={e => 
            store.dispatch({
              type: 'ADD_COUNTER'
            })
          }>
            Add Counter
          </button>
        </div>
      );    
  }
}

const render = () => {
  ReactDOM.render(<CounterApp />, document.getElementById("counter"));
};

store.subscribe(render);
render();