このように非同期アクション用のレデューサーを設計すると、どのような問題が発生しますか？

Question

私はフロントエンドアプリケーションを作成した経験はほとんどありません。Reduxを使用しているときには、自分自身でいくつかの慣習を確立したいと考えています。

const initialState = { 
    isRunning: false, 
    isFinished: false, 
    hasError: false, 
    response: null 
}; 
export const updatePostReducer = (state = initialState, action=null) => { 
    switch (action.type) { 
     case UPDATE_POST: 
      return { 
       isRunning: true, 
       isFinished: false, 
       hasError: false, 
       response: null 
      }; 
     break; 

     case UPDATE_POST_SUCCESS: 
      return { 
       isRunning: false, 
       isFinished: true, 
       hasError: false, 
       response: action.payload 
      }; 
     break; 

     case UPDATE_POST_ERROR: 
      return { 
       isRunning: false, 
       isFinished: false, 
       hasError: true, 
       response: null, 
       statusCode: action.statusCode 
      }; 

     case UPDATE_POST_INVALIDATE: 
      return initialState; 
     break; 

     default: 
      return state; 
    } 
}; 

は、上記のアプローチには問題ありませんが、私は、「プロセス・ステージ」混乱を見つける：

は現在、非同期アクションのための私の減速は、このように見えます。場合は、よそ代わりに不潔で）それがスイッチを（使用することが可能です

クリーナーです

1. ：私は後者のアプローチを使用して2つの利点を参照してください

   // IMPORTED FROM SEPARATE FILE 
   const stage = { 
       INITIAL: "INITIAL", 
       RUNNING: "RUNNING", 
       FINISHED: "FINISHED", 
       ERROR: "ERROR" 
   }; 
   
   const initialState = { 
       stage: stage.INITIAL, 
       response: null 
   }; 
   export const updatePostReducer = (state = initialState, action=null) => { 
       switch (action.type) { 
        case UPDATE_POST: 
         return { 
          stage: stage.RUNNING, 
          response: null 
         }; 
        case UPDATE_POST_SUCCESS: 
         return { 
          stage: stage.FINISHED, 
          response: action.payload 
         }; 
        case UPDATE_POST_ERROR: 
         return { 
          stage: stage.ERROR, 
          response: null, 
          statusCode: action.statusCode 
         }; 
        case UPDATE_POST_INVALIDATE: 
         return initialState; 
   
        default: 
         return state; 
       } 
   }; 
   

   ：そのため、私のアイデアはそれを短縮することです

欠点は以下のとおりです。

1. これは、どこでもstages.jsをインポートする必要があります。
2. 段階のきめ細かな制御

は、私の質問は何もありません：段階のきめ細かな制御がありませんがあるので、いくつかのシナリオでは、この問題を引き起こすが、だろうか？たとえば、hasError=true, isRunning=trueを同時に使用する必要がある場合がありますか？

Answer 1

あなたが提示する質問は、アプリケーションの使用例を知らなくても答えるのが難しいです。しかし、それが非常に単純なものではない場合、私はあなたが遅かれ早かれそのような単純化の問題に遭遇する可能性があると述べたいと思います。

statusCodeのような初期化されていない値に関するいくつかの問題もあります。途中で他の州では更新されません。エラーが発生したときにコードが更新された場合、再試行が成功した後もコードは変わりません。

私は別の方法を提案し、combineReducers()でさらに明示しています。

const isRunningReducer = (state=false, action=null) => { 
    switch (action.type) { 
     case UPDATE_POST: 
      return true; 
     case UPDATE_POST_SUCCESS: 
      return false; 
     case UPDATE_POST_ERROR: 
      return false; 
     case UPDATE_POST_INVALIDATE: 
      return false; 
     default: 
      return state; 
    } 
}; 

const isFinishedReducer = (state=false, action=null) => { 
    switch (action.type) { 
     case UPDATE_POST: 
      return false; 
     case UPDATE_POST_SUCCESS: 
      return true; 
     case UPDATE_POST_ERROR: 
      return false; 
     case UPDATE_POST_INVALIDATE: 
      return false; 
     default: 
      return state; 
    } 
}; 

const hasErrorReducer = (state=false, action=null) => { 
    switch (action.type) { 
     case UPDATE_POST: 
      return false; 
     case UPDATE_POST_SUCCESS: 
      return false; 
     case UPDATE_POST_ERROR: 
      return true; 
     case UPDATE_POST_INVALIDATE: 
      return false; 
     default: 
      return state; 
    } 
}; 

const statusCodeReducer = (state=null, action=null) => { 
    switch (action.type) { 
     case UPDATE_POST: 
      return null; 
     case UPDATE_POST_SUCCESS: 
      return action.statusCode; 
     case UPDATE_POST_ERROR: 
      return action.statusCode; 
     case UPDATE_POST_INVALIDATE: 
      return null; 
     default: 
      return state; 
    } 
}; 

const responseReducer = (state=null, action=null) => { 
    switch (action.type) { 
     case UPDATE_POST: 
      return null; 
     case UPDATE_POST_SUCCESS: 
      return action.payload; 
     case UPDATE_POST_ERROR: 
      return null; 
     case UPDATE_POST_INVALIDATE: 
      return null; 
     default: 
      return state; 
    } 
}; 

export const updatePostReducer = combineReducers({ 
    isRunningReducer, 
    isFinishedReducer, 
    hasErrorReducer, 
    statusCodeReducer, 
    responseReducer, 
}); 

短所：

• より冗長
• 繰り返し

利点：

ここ

はどのようにありますの

• 非常にシンプルで理解しやすい減速
• 少ないエラーが発生しやすい
• 簡単に拡張
• 発電機のコードを書きやすいように「isRunning」、「isFinished」などのような標準的な減速Reducing Boilerplate - Generating Reducers
  ：

ここで説明するように、このすべては、よりエレガント自身createReducer()方法で行うことが可能にインポートすることができます