これは私が投稿したスレッドに続くものです ここ
多くのトラブルシューティングを行った後、このコードは問題なく機能することがわかりました
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
Git cloneを実行した後、npm install
を実行する必要があります
組み合わせたレデューサーを使用すると、ストアは次のようなデータ構造になります。
_{
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})