javascript - 如何分离相互依赖的redux reducer？

我有一个小应用程序，向用户显示一个小列表，她可以动态过滤该列表。

所以我想我的状态看起来像：

{ 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;

而所有这些工作。但是对我来说，它也很臭。
我已经关注了redux教程（与Todo一起使用的Dan。）

我希望能够将减速器分为两个部分：


FilterReducer（过滤器更新）
DataReducer（filteredData更新）


但是第二个依赖第一个，我不知道如何以一种干净的方式做到这一点。

你有想法吗？

提前致谢

最佳答案

您可以在多个reducer中监听相同的动作。

监听UPDATE_FILTERS和filterReducer中的filteredDataReducer操作。

在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
    }
}