2017-03-02 11 views
1

私はのステップの配列を私の還元ストアに持っています。私の私の手順減速は、一連のアクションを処理することにより、ステップのリストを操作する:Reduxアクションと共有検証

  • ADD_STEP_REQUEST
  • REMOVE_STEP_REQUEST
  • MOVE_STEP_UP_REQUEST
  • MOVE_STEP_DOWN_REQUEST

これまでのところは良いです。

これで、ステップの順序が変更されるたびに(またはステップが追加または削除されたとき)、一種の検証を実行する必要がありました。この検証中に、各ステップをチェックして、それ以前のステップが特定の基準を満たしているかどうかを確認する必要があります。私は変更を拒否したくない場合は拒否したくありません。ステップでisInvalidフラグを設定し、最終的にステップがUIでどのように見えるかを変更したいだけです。

私はこれを扱うことができる最も簡単な方法は、各case文の終わりに減速によって運営されているvalidateOrder()関数(つまりフラグを適用し、ステップを返します)追加されます。ただし

case ADD_STEP_REQUEST: { 
    const amendedSteps = // add a step 
    return validateOrder(amendedSteps); 
} 

case REMOVE_STEP_REQUEST: { 
    const amendedSteps = // remove a step 
    return validateOrder(amendedSteps); 
} 

case MOVE_STEP_UP_REQUEST: { 
    const amendedSteps = // reorder steps 
    return validateOrder(amendedSteps); 
} 

case MOVE_STEP_DOWN_REQUEST: { 
    const amendedSteps = // reorder steps 
    return validateOrder(amendedSteps); 
} 

をすべてのcaseステートメントでvalidateOrderコールを繰り返す必要があるため、これは間違っています。

これを処理するより良い方法はありますか?

答えて

1

還元剤は単なる機能に過ぎません。

const yourReducer = (state = 'your initial state', action) => { 
    switch (action.type) { 
    case ADD_STEP_REQUEST: 
     // ... 
     return amendedSteps 

    case ... 
    } 
} 

const validatedReducer = (state, action) => { 
    switch (action.type) { 
    case ADD_STEP_REQUEST: 
    case REMOVE_STEP_REQUEST: 
    case MOVE_STEP_UP_REQUEST: 
    case MOVE_STEP_DOWN_REQUEST: 
     return validateOrder(yourReducer(state, action)) 

    default: 
     return yourReducer(state, action) 
    } 
} 

ここで責任を分けることができます。元のレデューサーは検証を気にする必要はありません。 validatedReducerがそれを処理します。

validateOrderは、すべての場合に適用されなければならない場合は、あなたがvalidatedReducerにswitch文を必要としないので、それはなります:

const validatedReducer = (state, action) => 
    validateOrder(yourReducer(state, action)) 
関連する問題