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に追加して書く必要もないのでとても楽です。
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。