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