combineReducers导致代码中断

Question

这是我在这里发布的帖子的后续内容

经过大量的故障排除后,我发现这段代码没有任何问题

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;

但是,如果我用一个联合减速器调用替换我的单个减速器

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控件获取错误,指出未指定强制道具.

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

我上传了一个示例项目,显示了问题.

https://github.com/abhitechdojo/MovieLensReact

你必须npm install在做一个git clone之后运行

Answer 1

使用组合缩减器,您的商店将具有以下数据结构:

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

因此,您应该调整容器以使用组合存储.例如DimensionPickerContainer.js你应该改变mapStateToProps功能:

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

您还可以在商店中命名您的简化,因此它们在数据结构中看起来不会太丑陋.例如combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})