reactjs - 返回 reducer 结果集合的 reducer

Question

我有一个如下所示的 reducer :

const chart = combineReducers({
    data,   
    fetchProgress,
    fetchError,
    updateProgress,
    updateError,
});

我现在不仅想要一个图表，而且想要多个图表。

const charts = (state = {}, action = {}) => {
    if (action.type == FETCH_CHART || action.type == ...) { 
        let newChart = chart(state[action.id], action);
        return Object.assign({}, state, {[action.id]: newChart});
    }
    return state;
}

这样做在概念上有问题吗？

如果没有，是否有更好的方法来达到相同的结果？

Answer 1

这个概念没有任何问题。事实上，我想说，当需要在 redux 存储中存储类似数据时，这是我的首选方法

为了改进它，您可以将其包装在高阶 reducer 中来处理它的 id 部分。像这样的东西:

const handleIds = (reducer) => (state = {}, action) => {
    if (action.id) {
        let idState = state[action.id]
        let newState = reducer(idState, action)

        if (newState !== idState) {
            return  { ...state, [action.id]: newState }
        }
    }

    return state
}

这将传递带有 id 的任何操作，并将生成的 state 合并到具有该 id 的 state 中> 因为它是关键，如果 state 已更改。

那么你的 reducer 就变成了:

const singleChart = (state = {}, action = {}) => {
    if (action.type == FETCH_CHART || action.type == ...) { 
        let newChart = chart(state, action);
        return newChart;
    }
    return state;
}

const charts = handleIds(singleChart)

然后将其合并到您的商店中:

const chart = combineReducers({
    data,   
    fetchProgress,
    fetchError,
    updateProgress,
    updateError,
    charts
});