redux-storedリストから項目を削除し、リスト遅延プロップにリダイレクトして評価しますか？

Question

私はステップのリストでビューを持っています。各ステップは、「表示」画面内から「表示」および「削除」することができます。私は、このステップを削除したい「ステップの削除」打ったとき（「詳細」の中から）

const mapStateToProps = (state, ownProps) => { 
    let stepId = ownProps.params.stepId; 
    let step = state.steps.find(s => s.id === stepId); 
    return {step}; 
}; 

を今すぐ： 私StepDetailsコンポーネントは、単純なsteps.find(...)と店舗のsteps部分から対応するステップをフェッチすることで、Reduxの店に結合します店舗から私はリストビューにナビゲートしたいと思う。

削除この1せずに新しいステップリストを返し、その後呼ばれるリダイレクト削除に呼び出されたReduxのアクションがあります：

const deleteStep = (stepId) => { 
    return dispatch => { 
    return stepsApi.deleteStep(stepId).then(steps => { 
     dispatch(action(STEPS_LIST_CHANGED, {steps})); 
     // react-router-redux action to redirect 
     dispatch(redirectToList()); 
    }) 
    } 
}; 

これは問題であり、1つの欠点で、私が欲しいものを行います。STEPS_LIST_CHANGEDアクションがあるときステップがリストから削除されると、このリダイレクトの前に私のコンポーネントのmapStateToPropsが呼び出されます。その結果、mapStateToPropsは明らかにこのステップを見つけることができず、私のコンポーネントはステップが定義されていないというエラーを表示します。

コンポーネントに提供されたステップが定義されているかどうかをチェックし、私が本当に好きではないような防御的なプログラミングのフレーバのようなものです。コンポーネントが間違ったデータを取得した場合の対処方法を知りたくないからです。

アクションディスパッチオーダーを交換することもできます。最初にリダイレクトしてから状態を変更しますが、それでも気になりません（論理的に最初に削除してリダイレクトしたい）。

どのように対処しますか？

EDIT：このヌル/コンテナコンポーネントに未定義チェック（Reduxの配線を行うもの）を入れていたと私は終わった何 。このアプローチでは、プレゼンテーションコンポーネントを不要なロジックで混乱させることはありません。また、必要な小道具がない場合には、nullまたは<div></div>をレンダリングするために、上位コンポーネント（またはおそらくES7デコレータ）に抽象化することもできます。

Answer 1

私は2つのアプローチを考えることができます：

• リストの委任のリダイレクトに変更しましたか？

  dispatch(redirectToList(action(STEPS_LIST_CHANGED, {steps}))); 
  

  レンダリングを無視するヌルステップコンポーネントの取り扱い

• ：たとえば

  shouldComponentUpdate: function() { 
      return this.state.steps != null; 
  } 
  

Answer 2

あなたに、アレイ

const mapStateToProps = (state, ownProps) => { 
    let stepId = ownProps.params.stepId; 
    let step = state.steps.find(s => s.id === stepId); 
    return step ? [{step}] : [] 
}; 

にこの方法をあなたのreturn文を変更することができますあなたはstep.map()を実行してレンダリングすることができます。