这是我在此处发布的主题之后的主题
经过大量的故障排除后,我发现此代码可以正常工作
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之后运行
npm install
使用组合化简器,您的商店将具有如下数据结构:
{ DimensionPickerReducer: { dimenisionName: '', pickerIsLoading: false, pickerError: '', currentAttribute: '', attributeList: [] }, DataTableReducer: { tableData: [], tableIsLoading:false, tableError: '' } }
因此,您应该调整容器以与组合商店一起使用。例如,DimensionPickerContainer.js您应该更改mapStateToProps功能:
DimensionPickerContainer.js
mapStateToProps
const mapStateToProps = (state) => { return { attributeList : state.DimensionPickerReducer.attributeList, currentAttribute : state.DimensionPickerReducer.currentAttribute } }
您还可以在商店中命名自己的reduce,这样它们在数据结构上就不会看起来很丑。例如combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})
combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})