LoginSignup
3

More than 5 years have passed since last update.

Redux (redux-thunk) でサーバーとの非同期通信を試す

Last updated at Posted at 2017-08-30

Webアプリでよく使うサーバとの非同期通信をredux-thunkでミニマムに実装

redux-thunkでGETリクエストして、レスポンスをViewに表示するまでをできるだけ最低限の実装で。
通信のエラー処理とか、reactとreduxを連携させる部分、Reactからアクションを呼ぶところ、redux-thunkのインストール等は省略してます。

処理の流れを確認。

  • redux-thunkを適用する(applyMiddleware)。
  • 通信を行うためのaction(loadUsers)をdispatchする。
  • loadUsersの中で非同期通信を実行
  • success/errorによってactionをdispatchしてstateにレスポンスデータを反映する。

実装

store.js
import {applyMiddleware, createStore} from 'redux'
import thunk from 'redux-thunk'

//store生成時に、applyMiddlewareでredux-thunkを使えるように適用する。
const store = createStore(reducer, applyMiddleware(thunk))
actions.js
// ユーザ一覧に取得成功し、レスポンスデータをstateに反映するためのアクション
function successFetchUsers(result) {
    return {
        type: 'SUCCESS_FETCH_USERS', 
        users: result
    };
}

// 非同期でAPIをコールするアクション
export const loadUsers = () => {
    return (dispatch) => {
            fetch("http://localhost:3000/users")
              .then(response => response.json())
              .then(result => dispatch(successFetchUsers(result))
              .catch(error => console.log(error))
    }
}

dispatchしたactionを受けたreducerでstateを更新。

reducers.js

initialState = {
  users: []
}

export const usersReducer = (state=initialState, action) => {
    switch (action.type) {
        case 'SUCCESS_FETCH_USERS':
            return Object.assign({}, state, {users: action.users})
        default:
            return state
    }
}

これに加えて、Viewで読み込み中…とかを表示するために通信状態をstateで管理したりするけど、今回は通信の部分だけをミニマムに実装したかったので、できるだけ不要な部分は省きました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3