目的

redux-thunk でどのように非同期処理をするのか試してみる。
カウンターの処理は以前書いたものを流用（ReactJS + Redux + ES6 のカウンターのサンプル）

ファイル構成

.
├── dest
│   └── bundle.js
├── index.html
├── package.json
└── src
    └── app.jsx

package

pacage.json

{
  "name": "react-flux-redux-thunk",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "watchify src/app.jsx -o dest/bundle.js -v --debug",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "watchify": "^3.7.0"
  },
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-redux": "^4.4.5",
    "redux": "^3.4.0",
    "redux-thunk": "^2.0.1"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015",
            "react"
          ]
        }
      ]
    ]
  }
}

インストールとビルド

$ npm install
$ npm run watch

code

src/app.jsx

import React, { PropTypes } from 'react';
import thunk from 'redux-thunk';
import { render } from 'react-dom';
import { applyMiddleware, createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// Action
function actionIncrement() {
  return {
    type: 'INCREMENT',
    count: 1
  };
}
function actionIncrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(actionIncrement());
    }, 1000);
  };
}

function actionDecrement() {
  return {
    type: 'DECREMENT',
    count: -1
  };
}
function actionDecrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(actionDecrement());
    }, 1000);
  };
}

// Reducer
function counterReducer (state = {count: 0}, action) {
  let count = state.count;
  switch (action.type) {
    case 'INCREMENT':
      return {count: count + action.count};
    case 'DECREMENT':
      return {count: count + action.count};
    default:
      return state;
  }
}


// Component
class CounterComponent extends React.Component {
  render () {
    const { count, onClickPlus, onClickMinus } = this.props;
    return (
      <div>
        <p><span>Count: {count}</span></p>
        <div>
          <button onClick={onClickPlus}>+1</button>
          <button onClick={onClickMinus}>-1</button>
        </div>
      </div>
    );
  }
}

CounterComponent.propTypes = {
  count: PropTypes.number.isRequired,
  onClickPlus: PropTypes.func.isRequired,
  onClickMinus: PropTypes.func.isRequired,
};


// Containers
function mapStateToPropsContainer(state) {
  return {
    count: state.count
  };
}

function mapDispatchToPropsContainer(dispatch) {
  return {
    onClickPlus: () => dispatch(actionIncrementAsync()),
    onClickMinus: () => dispatch(actionDecrementAsync()),
  };
}

let App = connect(
  mapStateToPropsContainer,
  mapDispatchToPropsContainer
)(CounterComponent);


// main
let store = createStore(
  counterReducer,
  applyMiddleware(thunk)
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app-container')
);

表示

$ python -m SimpleHTTPServer 3000

http://localhost:3000

ボタンを押すと1秒遅れて表示にカウント数が変わる

目的

ファイル構成

package

インストールとビルド

code

表示

参考