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

Question

我有一个小应用程序，用户会看到一个小列表，她可以动态过滤。

所以我认为我的状态应该是这样的:

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

..这可能已经是个坏主意了。

到目前为止，我也只有一个 reducer，它响应这些 Action :

• UPDATE_FILTERS
• 初始DATA_RECEIVED(仅在页面加载时一次)。

我的 reducer 看起来像这样:

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 教程(Dan. with Todo 的教程)

我希望能够将我的 reducer 分成两部分:

• FilterReducer(过滤器更新)
• DataReducer(过滤后的数据更新)

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

你有什么想法吗？

提前致谢

Answer 1

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

在 filterReducer 和 filteredDataReducer 中监听 UPDATE_FILTERS 操作。

在filterReducer中，修改store的filters部分。

在filteredData reducer中，修改store的数据部分。

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