combineReducers causa il codice di rompere

Question

Questo è successiva al thread che ho postato here

Dopo sacco di risoluzione dei problemi ho scoperto che questo codice funziona senza problemi

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; 

Ma se sostituisco il mio unico riduttore con un combinare chiamata riduttore come

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; 

comincio subito ottenere gli errori dal controllo DimensionPicker che i puntelli obbligatori non sono stati specificati.

Quindi il metodo combineReducer non funziona per me.

Qui viene caricato un progetto di esempio che mostra il problema.

https://github.com/abhitechdojo/MovieLensReact

Si dovrà eseguire npm install dopo aver fatto un clone git

Answer 1

Con riduttori combinati tuo negozio avrà struttura dei dati del genere:

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

così si dovrebbe regolare le contenitori per lavorare con il negozio combinato. Per esempio in DimensionPickerContainer.js si dovrebbe cambiare mapStateToProps funzione:

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

È inoltre possibile assegnare un nome al riduce in negozio, in modo da non sembrare brutto nella struttura dati. Per esempio. combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})