reactjs - 如何在一个状态内合并多个 reducer ？

Question

我正在尝试构建一个应用程序，该应用程序具有两个或多个 reducer ，由我的storeState内的一个对象“应答”。

示例:

storeState {
    app: {...},
    comments: [ ...two or more states inside one... ]
}

我已经使用 mergeReducers 尝试了以下操作，但没有成功，我的 comments 状态变成了一个空对象。

import { combineReducers } from 'redux';
import commentFacebookReducer from './twitch';
import commentYoutubeReducer from './reddit';
import appReducer from './app';

const rootReducer = combineReducers({
  comments: [commentFacebookReducer, commentYoutubeReducer],
  app: appReducer
});

export default rootReducer;

并且我已经尝试在将它们组合到 rootReducer 之前组合我的评论缩减器:

import { combineReducers } from 'redux';
import commentFacebookReducer from './twitch';
import commentYoutubeReducer from './reddit';
import appReducer from './app';

const commentReducers = combineReducers({
  commentFacebookReducer,
  commentYoutubeReducer
});

const rootReducer = combineReducers({
  comments: commentReducers,
  app: appReducer
});

export default rootReducer;

但它给了我一个像下面这样的 storeState 。但我需要一个由评论数组组成的状态，我无法处理这些 reducer 名称(例如 commentFacebookReducer 或 commentYoutubeReducer)，因为我将拥有数千个这样的 reducer 。

storeState {
    app: {...},
    comments: {
        commentFacebookReducer: {...},
        commentYoutubeReducer: {...}
    }
}

Answer 1

我认为仅使用combineReducer 无法做到这一点。因为combineReducer需要一个对象，并且该对象的每个属性都应该是 一个函数。然后该对象中的每个函数都会在 redux 状态树中创建一个单独的属性，并且该属性的值是该函数返回的值(当调度任何操作时)。

此外，您无法在其他 reducer 中访问一个 reducer 的状态，因为 redux 仅将该特定 reducer 的状态传递给函数。这意味着您无法在 commentYoutubeReducer 内获取/更改 commentFacebookReducer 的状态。

我现在能想到的唯一更好的解决方案是在使用它们时将它们组合起来(最有可能在mapStateToProps中)。你可以像这样保持你的 reducer :

const commentReducers = combineReducers({
  commentFacebookReducer,
  commentYoutubeReducer
});

const rootReducer = combineReducers({
  comments: commentReducers,
  app: appReducer
});

现在我们所有的评论都在一个对象中，即(state.comments)。现在在 mapStateToProp 中，您可以执行类似的操作将它们组合在单个对象中::

const mapStateToProps = state => {
    return {
        comments: Object.keys(state.comments).reduce((d, k) => {return d.concat(a[k])}, [] )
    };
};

现在在组件中，您可以使用 this.props.comments 将它们作为单个数组简单地访问