お互いに依存するレデックスレデューサーを分ける方法は？

Question

私はユーザーに小さなリストが表示され、動的にフィルタリングできる小さなアプリケーションを持っています。

だから私は、私の状態は次のようになり考えた：すでにおそらく悪い考えです..which

{ data: [], filters: {}, filteredData: [] } 

。

• UPDATE_FILTERS
• 初期DATA_RECEIVED（一度だけ、ページの読み込みに）：

  は、私はまた、アクションに応答することを、これまでのところ唯一の減速を持っています。

私の減速は、次のようになります。

import {UPDATE_FILTERS, DATA_RECEIVED} from '../actions/actions' 

function getFilteredDataRows(filters, data){ 

    const distanceMin = parseInt(filters.distanceMin) || 0; 
    const distanceMax = parseInt(filters.distanceMax) || 9999999999; 
    const location = filters.location || ''; 
    return (
     data 
     .filter((swim) => swim.location.toLowerCase().includes(location.toLowerCase())) 
     .filter((swim) => swim.distance > distanceMin) 
     .filter((swim) => swim.distance < distanceMax) 
    ); 
} 

const filterReducer = (state = [], action) => { 
    switch(action.type){ 
     case UPDATE_FILTERS: 
      const newFilters = Object.assign({}, state.filters, action.filters); 
      return { filters : newFilters, data: state.data, filteredData: getFilteredDataRows(newFilters, state.data)}; 

     case DATA_RECEIVED: 
      return {filters : state.filters, data: action.data, filteredData: getFilteredDataRows(state.filters, action.data)}; 
     default: 
      return state 
    } 
} 


export default filterReducer; 

そしてこのすべてが動作します。しかし私にとっては、それも悪臭を放つ。

• FilterReducer（フィルタの更新）
• DataReducer：私は二つに私の減速を分離できるようにしたいと思い

  を（。藤堂さんとダンの1）Reduxのチュートリアルに従っている （filteredData更新）

しかし、第2のものは最初のものに依存しています。これをきれいに行う方法はわかりません。

アイデアはありますか？これらは真のニーズではなく、いくつかの単純化されている場合には、事前

Answer 1

で

おかげで、私はまったくなく、ただ何も使用Reduxのが反応状態を管理しません。あなたの質問に

：

状態でfilteredData、データのみとフィルタがあるべきではありません。

getFilteredDataRows方法は、データを表示するかmapStateToProps

から反応するコンポーネントのレンダリング関数から呼び出されるべきは、彼のgetVisibleTodosあなたをことができますgetFilteredDataRows

Answer 2

のようなものであるの実装コンテナコンポーネントのthe Redux docsを参照してください複数のレデューサーで同じアクションを聞きます。

とfilteredDataReducerの両方でUPDATE_FILTERSアクションのリスンを確認してください。

filterReducerでは、ストアのフィルタ部分を変更します。

filteredData reducerでは、ストアのデータ部分を変更します。

filterReducer.js：

const filterReducer = (state = [], action) => { 
    switch(action.type){ 
     case UPDATE_FILTERS: 
    return Object.assign({}, state, filters: action.filters); 
     default: 
      return state 
    } 
} 

filteredData.jsは：

const filteredDataReducer = (state = [], action) => { 
switch(action.type){ 
     case UPDATE_FILTERS: 
      return Object.assign({}, state, filteredData: getFilteredData(action.filters, state.data)); 
     default: 
      return state 
    } 
} 

Answer 3

問題は、貼り付けたコードのあなたの最初の行です。

データと現在のフィルタの状態を維持します。フィルタリングされたデータは、状態（他の状態の部分から計算できることを意味します）から導出され、Reactコンポーネントで「計算される」必要があります。 dataまたはfilterのいずれも変更されない場合、connectはコンポーネントを再レンダリングしません。

したがって、getFilteredDataを状態全体を受け取り、UIを必要とする特定のデータを格納するセレクタに移動します。

あなたはそのデータを使用して反応コードを表示していないので、私はあなたをさらに助けることはできません。

http://redux.js.org/docs/recipes/ComputingDerivedData.html