Help us understand the problem. What is going on with this article?

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away