Edited at

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

More than 1 year has passed since last update.


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で管理したりするけど、今回は通信の部分だけをミニマムに実装したかったので、できるだけ不要な部分は省きました。