バックエンドからの戻りに基づいて配列内の1つの要素をRedux更新する

Question

私はReact-Reduxアプリケーションを持っており、更新機能を構築しています。私は状態のプロットのリストを持っていて、それらの一つを更新します。アップデートAPIコールが成功すると、更新されたプロットがレスポンスとして取得されます。古いプロットを状態の更新されたプロットに置き換えるにはどうすればよいですか？

今、これは私のレデューサーです。更新されたプロットがログに記録されているのを見ていますが、リロードしない限り状態は置き換えられません。私はいつも成功のバックエンドからプロットリスト全体のリロードをトリガーすることができますが、不要な呼び出しを避けたいと思います。

case UPDATED_PLOT: 
      action.payload.id = action.payload._id; 
      console.log('updated plot received by reducer: ', action.payload); 
      return { 
       ...state, 
       filteredPlots: state.filteredPlots.map(
        plot => (plot.id == action.payload.id ? action.payload : plot) 
       ) 
      }; 

Answer 1

あなたの減速コードは、私には正常に見えます。あなたはredux州が更新されたと結論付けましたか？ redux-dev-toolsのインストールを試みて、状態が更新されていないことを確認しましたか？

状態が更新されていることが確かであれば、コンポーネントが再レンダリングされているかどうかをチェックする価値があります。特定のコンポーネントでcomponentWillUpdate（）を計測できます。また、react-reduxのドキュメント、特に "純粋な"オプションをチェックする価値があります。

Answer 2

これを試してみてください：

case UPDATED_PLOT: 
    action.payload.id = action.payload._id; 
    const new_filtered_plots = state.filteredPlots.map(plot => { 
     return plot.id == action.payload.id ? action.payload : plot 
    }); 
    return Object.assign({}, state, {filteredPlots: new_filtered_plots});