ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す ref: http://qiita.com/MegaBlackLabel/items/df868e734d199071b883

actionCreators1.js

import { createAction } from 'redux-actions';

export const INC = 'INC';
export const DEC = 'DEC';

export const dispatch1 = createAction(INC);
export const dispatch2 = createAction(DEC);

actionCreators2.js

import { createAction } from 'redux-actions';

export const PLUS2 = 'PLUS2';
export const PLUS3 = 'PLUS3';

export const dispatch3 = createAction(PLUS2);
export const dispatch4 = createAction(PLUS3);

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as actionCreators1 from './actionCreators1';
import * as actionCreators2 from './actionCreators2';

class App extends Component {
  render() {
    const { app: { count }, dispatch1, dispatch2, dispatch3, dispatch4 } = this.props;
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={ e => dispatch1()}>INC: { count }</button>
        <button onClick={ e => dispatch2()}>DEC: { count }</button>
        <button onClick={ e => dispatch3()}>PLUS2: { count }</button>
        <button onClick={ e => dispatch4()}>PLUS3: { count }</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return  { app: state.app };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Object.assign({}, actionCreators1, actionCreators2), dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

file0.txt

- Provider
- connect 

file10.txt

function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps)(TodoApp)

file12.txt

import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps, actionCreators)(TodoApp)

file14.txt

import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

file17.txt

import { addTodo } from './actionCreators'
import { bindActionCreators } from 'redux';

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addTodo }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

file19.txt

import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return {
    todoActions: bindActionCreators(todoActionCreators, dispatch),
    counterActions: bindActionCreators(counterActionCreators, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

file23.txt

import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

file25.txt

import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Object.assign({}, todoActionCreators, counterActionCreators), dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

file27.txt

import * as actionCreators from './actionCreators'

function mapStateToProps(state, ownProps) {
  return { todos: state.todos[ownProps.userId] }
}

export default connect(mapStateToProps)(TodoApp)

file28.txt

import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, {
    todos: stateProps.todos[ownProps.userId],
    addTodo: (text) => dispatchProps.addTodo(ownProps.userId, text)
  })
}

export default connect(mapStateToProps, actionCreators, mergeProps)(TodoApp)

file3.txt

npm start

file4.txt

export default connect()(TodoApp)

file6.txt

import * as actionCreators from './actionCreators'

export default connect(null, actionCreators)(TodoApp)

file8.txt

export default connect(state => state)(TodoApp)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import App from './App';
import './index.css';

const appInitialState = { count : 0 }

export const app = (state = appInitialState, action) => {
  switch (action.type) {
    case 'INC':
      console.log("click INC");
      return Object.assign({}, { count: state.count + 1 });
    case 'DEC':
      console.log("click DEC");
      return Object.assign({}, { count: state.count - 1 });
    case 'PLUS2':
      console.log("click PLUS2");
      return Object.assign({}, { count: state.count + 2 });
    case 'PLUS3':
      console.log("click PLUS3");
      return Object.assign({}, { count: state.count + 3 });
    default:
      return state;
  }
}

const RootReducer = combineReducers({app});

const store = createStore(RootReducer);

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);