combReducers вызывает сбой кода

Это следует за потоком, который я разместил здесь< /а>

После большого количества устранения неполадок я обнаружил, что этот код работает без проблем.

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, что обязательные реквизиты не были указаны.

Так что метод combReducer у меня не работает.

Я загрузил пример проекта здесь, который показывает проблему.

https://github.com/abhitechdojo/MovieLensReact

Вам нужно будет запустить npm install после выполнения клонирования git


reactjs redux react-redux
person Knows Not Much    schedule 15.02.2016    source источник

Ответы (1)


arrow_upward
41
arrow_downward

С комбинированными редукторами ваш магазин будет иметь такую ​​структуру данных:

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

person xCrZx    schedule 15.02.2016
comment
и где будет объявлена ​​исходная комбинированная структура данных? ранее я объявлял отдельные структуры данных для начального состояния в соответствующих редьюсерах. Теперь, если мне нужно иметь одну структуру данных для всего начального состояния. что было бы хорошим местом, чтобы заявить об этом? - person Knows Not Much; 15.02.2016
comment
Структура данных по-прежнему должна быть объявлена ​​в соответствующих редьюсерах. И если вы хотите загрузить начальные данные в свой магазин, лучше всего там, где вы объявляете createStore(), просто передайте его в качестве второго аргумента. Подробнее об этом: github.com/reactjs/redux/blob/ master/docs/api/createStore.md - person xCrZx; 15.02.2016
comment
@xCrZx, спасибо! Вы сэкономили мое время. - person norioumata; 14.01.2021