公式ドキュメントのここらへん。

Async Actions | Redux

そもそも

普通のSPAだと、AJAX呼び出しとかで非同期な処理が盛りだくさん。Reduxでどうやるの？という風になるのですが、これが素のReduxのライブラリだけだと難しいということで、redux-thunkというミドルウェアを入れないといけないということです。

もろもろインストール

以下のものをインストールしておきます。

• object-assign
• react
• react-redux
• redux
• redux-thunk

作るもの

足し算アプリを作ります。左辺値と右辺値を入れてボタンを押したら3秒後に足した結果を表示するというものです。setTimeoutでやりますが、まぁ実際はsetTimeoutじゃなくてajax呼び出しのコールバックに置き換わるという感じです。

数字を入力してボタンを押した直後（まだ答えは反映されてない）

一定時間が経過すると、答えが表示される（Ajaxから計算結果が返ってきた風）

データの入れ物

アプリのデータとして以下のようなクラスを準備します。

// models.tsexportclass Calc {
    constructor(
        public x: number,
        public y: number,
        public answer: number) {}}

アクション

アクションを作ります。x, yを受け取るaddと答えをセットするsetAnswerという2つのアクションを定義します。

// actions.tsimport * as Redux from 'redux';

exportenum ActionTypes {
    Add,
    SetAnswer
}exportinterface Action<T> {
    type: ActionTypes;
    payload: T;
}exportclass AddPayload {
    constructor(
        public x: number,
        public y: number) {}}exportclass SetAnswerPayload {
    constructor(public answer: number) {}}exportfunction add(x: number, y: number): Action<AddPayload> {return{
        type: ActionTypes.Add,
        payload: new AddPayload(x, y)
    };
}exportfunction setAnswer(answer: number): Action<SetAnswerPayload> {return{
        type: ActionTypes.SetAnswer,
        payload: new SetAnswerPayload(answer)
    };
}

次がポイントです。非同期処理のアクションを定義します。このアクションはRedux.Dispatchを受けとる関数を返します。この関数の中でRedux.Dispatchを使って非同期処理の前や非同期処理の完了後に別のアクションを呼び出します。

// actions.tsの続きexportfunction fetchAdd(x: number, y: number) {return (dispatch: Redux.Dispatch) => {
        dispatch(add(x, y));

        setTimeout(() => {
            dispatch(setAnswer(x + y));
        }, 3000);
    };
}

今回の場合は、最初にx,yを受け取るアクションを実行して、3秒後に計算結果をsetAnswerアクションに渡しています。

Reducer

Reducerは通常通りですね。

// reducers.tsimport * as Redux from 'redux';
import * as Models from './models';
import * as Actions from './actions';
import assign = require('object-assign');

exportfunction add(state: Models.Calc, action: Actions.Action<Actions.AddPayload>): Models.Calc {switch (action.type) {case Actions.ActionTypes.Add:
            return assign({}, state, {
                x: action.payload.x,
                y: action.payload.y
            } as Models.Calc);
        default:
            return state;
    }}exportfunction setAnswer(state: Models.Calc, action: Actions.Action<Actions.SetAnswerPayload>): Models.Calc {switch (action.type) {case Actions.ActionTypes.SetAnswer:
            return assign({}, state, {
                answer: action.payload.answer
            } as Models.Calc);
        default:
            return state;
    }}exportfunction calc(state: Models.Calc = new Models.Calc(0, 0, 0), action: Actions.Action<any>): Models.Calc {switch (action.type) {case Actions.ActionTypes.Add:
            return add(state, action);
        case Actions.ActionTypes.SetAnswer:
            return setAnswer(state, action);
        default:
            return state;
    }}exportinterface CalcAppState {
    calc: Models.Calc;
}exportconst calcApp = Redux.combineReducers({
    calc
});

ポイントは、CalcAppStateで、アプリのステートを明示的に型指定してるところですかね。combineReducersの呼び出しの近くに書いておくと実態との同期漏れがなくなりそうです。

コンポーネント

次にコンポーネントを作ります。とりあえずシンプルな例なのでコンポーネントは1つだけです。

// components.tsximport * as React from 'react';
import * as Redux from 'redux';
import * as Models from './models';
import * as Actions from './actions';

exportinterface AppProps extends React.Props<{}> {
    calc?: Models.Calc;
    dispatch?: Redux.Dispatch;
}exportclass App extends React.Component<AppProps, {}> {private handleSubmit(e: React.SyntheticEvent) {
        e.preventDefault();
        var x = parseInt((this.refs['x'] as HTMLInputElement).value);
        var y = parseInt((this.refs['y'] as HTMLInputElement).value);
        if (x && y) {this.props.dispatch(Actions.fetchAdd(x, y));
        }}

    render() {var{ calc, dispatch } = this.props;
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <input type='text' ref='x' />
                    <span>+</span>
                    <input type='text' ref='y' />
                    <hr />
                    <span>{calc.x} + {calc.y} = {calc.answer}</span>
                    <br />
                    <input type='submit' value='計算' />
                </form>
            </div>
        );
    }}

formのonSubmitのハンドラの中で、fetchAddを呼び出しています。ここで非同期処理開始ですね。

ミドルウェアの適用

さて、アクションでRedux.Dispatchを受けとる関数を返す形のアクションを作りましたがreact-thunkをちゃんと適用しないと実行時エラーになります。最後の仕上げapp.tsxでRedux.applyMiddlewareでredux-thunkを適用するcreateStore関数を作ります。

// app.tsximport * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as Reducers from './reducers';
import * as Redux from 'redux';
import{Provider, connect} from 'react-redux'import * as Components from './components';
import thunk = require('redux-thunk');

const createStoreWithMiddleware = Redux.applyMiddleware(thunk as any)(Redux.createStore);

function select(state: Reducers.CalcAppState): Components.AppProps {return{
        calc: state.calc
    };
}const App = connect(select)(Components.App);
const store = createStoreWithMiddleware(Reducers.calcApp);

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

redux-thunkの型定義がイマイチっぽいので、anyへのキャストが入ってますが、Redux.applyMiddlewareに適用したいミドルウェアを渡して出来上がったものにRedux.createStoreを渡します。出来上がったものに対してReducerを渡してstoreを作ります。普通のcreateStoreを使わないところに注意ですね。

まとめ

ミドルウェア入れなくても標準でサポートしておいてほしかったと思わなくもない非同期呼び出しでした。