Add list

Author: Jaakko Ojalehto

examples/counter/actions/list.js

@@ -0,0 +1,14 @@
+export const ADD_COUNTER = 'ADD_COUNTER';
+export const REMOVE_COUNTER = 'REMOVE_COUNTER';
+
+export function add() {
+  return {
+    type: ADD_COUNTER
+  };
+}
+
+export function remove() {
+  return {
+    type: REMOVE_COUNTER
+  };
+}

examples/counter/components/List.js

@@ -0,0 +1,41 @@
+import React, { Component, PropTypes } from 'react';
+import Counter from './Counter';
+
+class List extends Component {
+
+  increment(index) {
+    let action = this.props.counterActions.increment()
+    action.index = index
+    this.props.dispatch(action)
+  }
+
+  decrement(index) {
+    let action = this.props.counterActions.decrement()
+    action.index = index
+    this.props.dispatch(action)
+  }
+
+  render() {
+    const { add, remove, counterList, counterActions } = this.props;
+    return (
+      <p>
+        {' '}
+        <button onClick={add}>Add counter</button>
+        {' '}
+        <button onClick={remove}>Remove counter</button>
+        {counterList.map((counter, counterId) => {
+          return <Counter key={counterId} id={counterId} counter={counter} increment={this.increment.bind(this, counterId)} decrement={this.decrement.bind(this, counterId)}></Counter>
+        })}
+      </p>
+    );
+  }
+}
+
+List.propTypes = {
+  add: PropTypes.func.isRequired, 
+  remove: PropTypes.func.isRequired,
+  counterList: PropTypes.array.isRequired,
+  dispatch: PropTypes.func.isRequired
+};
+
+export default List;

examples/counter/containers/App.js

@@ -1,16 +1,20 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import Counter from '../components/Counter';
+import List from '../components/List';
 import * as CounterActions from '../actions/counter';
+import * as ListActions from '../actions/list';
 
 function mapStateToProps(state) {
   return {
-    counter: state.counter
+    counterList: state.counterList
   };
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators(CounterActions, dispatch);
+  let actions = bindActionCreators(ListActions, dispatch);
+  actions.counterActions = bindActionCreators(CounterActions, dispatch);
+  actions.dispatch = dispatch
+  return actions;
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Counter);
+export default connect(mapStateToProps, mapDispatchToProps)(List);

examples/counter/reducers/index.js

@@ -1,8 +1,12 @@
 import { combineReducers } from 'redux';
 import counter from './counter';
+import list from './list'
 
 const rootReducer = combineReducers({
-  counter
+  counterList: list(counter, {
+    add: 'ADD_COUNTER',
+    remove: 'REMOVE_COUNTER'
+  })
 });
 
 export default rootReducer;

examples/counter/reducers/list.js

@@ -0,0 +1,22 @@
+export default 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, i) => {
+          if(index == i) {
+            return reducer(item, rest)
+          } else {
+            return item
+          }
+        });
+      }
+      return state;
+    }
+  }
+}