web-dev-qa-db-ja.com

CombineReducersはコードを壊します

これは私が投稿したスレッドに続くものです ここ

多くのトラブルシューティングを行った後、このコードは問題なく機能することがわかりました

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を実行する必要があります

reactjsreduxreact-redux
16
Knows Not Much

組み合わせたレデューサーを使用すると、ストアは次のようなデータ構造になります。

_{
    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})

36
xCrZx