Redux公式のページで紹介されているAJAXを使ったアプリをベースに、 GitHubの公開リポジトリを取得するアプリを作ってみました。

React Redux Async Sample

動作イメージ↓

Anime

環境

  • react 15.5.4
  • redux 3.6.0
  • react-redux 5.0.4
  • redux-thunk 2.2.0

手順

大まかなステップだけ説明します。

1. Stateを決める

最初にアプリケーション全体のStateを決めます。 今回は以下のように単純な形でいきます。

{
  username: "saitoxu",
  isFetching: false,
  repos: [
    { name: "repo1" },
    { name: "repo2" },
    { name: "repo3" }
  ]
}

2. Actionの定義

Actionはリクエストを送るときのREQUEST_REPOSと、 レスポンスを受け取ったときのRECEIVE_REPOSの2種類定義します。

GitHubの公開リポジトリを取得するのはFetch APIを使いました。

3. Reducerを作る

次に、Reducerを作ります。 今回はStateが単純なので、Reducerは1つだけでOKです。

4. Storeを作る

ReducerからStoreを作るのは簡単です。 非同期リクエストを扱うので、redux-thunkで提供されているthunkMiddlewareをかませます。

残りはGistにあげているので確認してみてください。