如何在一个州内合并多个减速器？

Question

我正在尝试构建一个应用程序,减少two or more器"回答"我内部的一个对象storeState.

例:

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

我已经尝试了以下使用不起作用的combineReducers,我的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.但我需要一个注释数组的状态,我不能处理这些减少名称(如commentFacebookReducer或commentYoutubeReducer),因为我会有数千个这样的减速器.

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

Answer 1

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

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

我现在能想到的唯一更好的解决方案是在使用它们时将它们组合起来（最有可能在mapStateToProps中）。你可以像这样保持你的减速器：

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