ブログ

React/ReduxのアプリでAPI通信する時に、ボタンを非活性にしたかったり、読み込み中のアイコンを出したい。

これを実現するための方法で一番簡単なのはAPIの「リクエスト・成功・失敗」時にreducerで以下のように書くのが一番簡単でシンプル。

ですが、この実装だと毎度isFetchingやisCreatingなどと書く必要があり冗長です。

switch(action.type) { 
  case 'REQUEST_FETCH_USERS':
    return Object.assign({}, state, isFetching: true)
  case 'SUCCESS_FETCH_USERS':
    return Object.assign({}, state, isFetching: false)
  case 'FAILED_FETCH_USERS':
    return Object.assign({}, state, isFetching: false)

ちょっと調べてみたら、ローディングのフラグ管理をきれいに書ける方法を見つけたのでご紹介します。

参考にした記事

React/Redux Tips: Better Way to Handle Loading Flags in Your Reducers

export const loadingReducer = (state = initialState, action) => {
  const { type } = action
  const matches = /(.*)_(REQUEST|SUCCESS|FAILED)/.exec(type)
  if (!matches) {
    return state
  }
  const [, requestName, requestState] = matches
  return {
    ...state,
    [requestName]: requestState === 'REQUEST',
  }
}

reducerはどのactionからでも受け取れるのでloading用のreducerを用意し、typeを見てAPIに関するものか判別し、リクエスト時にローディングフラグをtrueにします。

ローディングフラグ名はtypeの値になるのでわかりやすく、しかもactionが増える度にreducerに追加して書く必要もないのでとても楽です。