combineReducers 导致代码中断 [英] combineReducers causes code to break

问题描述

这是在我发布的帖子之后这里

This is subsequent to the thread I posted here

经过大量故障排除后，我发现此代码可以正常工作

After lot of troubleshooting I found that this code works without any problems

import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import DataTableReducer from './reducers/DataTableReducer';
import DimensionPickerReducer from './reducers/DimensionPickerReducer';

const loggerMiddleware = createLogger();
const store = createStore(
    DimensionPickerReducer, 
    applyMiddleware(
        thunkMiddleware, 
        loggerMiddleware
    )
);

export default store;

但是如果我用像这样的组合减速器调用替换我的单个减速器

But if I replace my single reducer with a combine reducer call like

import React from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import { Provider } from 'react-redux';
import DataTableReducer from './reducers/DataTableReducer';
import DimensionPickerReducer from './reducers/DimensionPickerReducer';

const loggerMiddleware = createLogger();
const store = createStore(
    combineReducers({
        DataTableReducer,
        DimensionPickerReducer
    }), 
    applyMiddleware(
        thunkMiddleware, 
        loggerMiddleware
    )
);

export default store;

我立即开始收到 DimensionPicker 控件的错误，即未指定强制道具.

I immediately start getting errors by the DimensionPicker control that the mandatory props were not specified.

所以 combineReducer 方法对我不起作用.

So the combineReducer method is not working for me.

我在这里上传了一个显示问题的示例项目.

I am uploaded a sample project here which shows the problem.

https://github.com/abhitechdojo/MovieLensReact

你必须在执行 git clone 后运行 npm install

You will have to run npm install after doing a git clone

推荐答案

使用合并的 reducer，您的商店将拥有如下数据结构:

With combined reducers your store will have data structure like that:

{
    DimensionPickerReducer: {
        dimenisionName: '',
        pickerIsLoading: false,
        pickerError: '',
        currentAttribute: '',
        attributeList: []
    },
    DataTableReducer: {
        tableData: [],
        tableIsLoading:false,
        tableError: ''
    }
}

因此您应该调整您的容器以与组合存储一起使用.例如在 DimensionPickerContainer.js 你应该改变 mapStateToProps 函数:

So you should adjust your containers to work with combined store. For example in DimensionPickerContainer.js you should change mapStateToProps function:

const mapStateToProps = (state) => {
    return {
        attributeList : state.DimensionPickerReducer.attributeList,
        currentAttribute : state.DimensionPickerReducer.currentAttribute
    }
}

你也可以在 store 中命名你的 reduce，这样它们在数据结构中就不会看起来很丑.例如.combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})

You can also name your reduces in store, so they would not look ugly in data structure. E.g. combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})

这篇关于combineReducers 导致代码中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！