2016-07-15 8 views
0

Ich habe versucht, herauszufinden, wie combineReducers auf der Serverseite nach der zu verwenden.Store hat keinen gültigen Reducer mit combineReducer

Hier sind zwei der Reduzierungen ich zu kombinieren bin versucht, aber kein Erfolg:

ListingReducer:

import ActionType from '../ActionType' 

export default function ListingReducer (state = Immutable.List.of(), action){ 
    switch(action.type) { 
     case ActionType.ADD: 
      return [ 
       ...state, 
       action.item 

      ]; 
     case ActionType.DELETE: 
      return state.filter(function(cacheItem){ 
       return cacheItem.id !== action.item.id; 
     }); 
     default: 
      return state 
    } 
} 

DialogShowHideReducer:

import ActionType from '../ActionType' 

export default function DialogShowHideReducer (state = false, action){ 
    switch(action.type) { 
     case ActionType.DIALOG: 
      state = action.visible?false:true; 
      return state; 
     default: 
      return state; 
    } 
} 

Store.js (Ich muss Übergeben Sie einige Anfangsdaten an den Reduzierer, um Artikel dynamisch hinzuzufügen oder zu entfernen.)

import {createStore} from 'redux'; 
import { combineReducers } from 'redux'; 
import ListingReducer from '../reducer/ListingReducer'; 
import DialogReducer from '../reducer/DialogShowHideReducer'; 

export default function (initData){ 
    let listingStore = ListingReducer(initData.item,{}); 
    let dialogStore = DialogShowHideReducer(false,{'type':'default'}); 

    // !!!!!!No reducers coming out of this function!!!!!!!!!! 
    let combineReducer = combineReducers({ 
     listing:listingStore, 
     dialog:dialogStore 
    }); 

    return createStore(combineReducer) 
} 

homepage_app.js

import store from './store/Store' 
import CustomComponent from './custom_component'; 

export default class HomePage extends React.Component { 

    render() { 
     <Provider store={store(this.props)}> 
     <CustomComponent/> 
     </Provider> 
    } 

} 

Aber was ist die Fehlerreduzierer Ausfall etwa beim Laden der Seite auf der Client-Seite?

Store does not have a valid reducer. 
Make sure the argument passed to combineReducers 
is an object whose values are reducers. 

Der wesentliche Unterschied zwischen dem offiziellen Guide und meiner exmaple ist, dass ich den Ausgangszustand zu einem gewissen Minderer passieren, bevor sie zu combineReducers vorbei.

Antwort

3

Das Problem ist, dass Sie keine Funktionen an Ihre combineReducers Funktion übergeben. Sie geben das Ergebnis Ihrer Reducer-Funktionen weiter, wenn Sie etwas wie let listingStore = ListingReducer(initData.item,{}); tun. Dies setzt listingStore gleich dem Status, der von der Reduzierfunktion zurückgegeben wird, anstelle der Reduzierfunktion selbst.

Wenn Sie den Ausgangszustand dynamisch an Ihre Reduzierungen übergeben müssen (d. H. Nicht hart in den Reduzierer einprogrammieren), stellt Redux ein preloadedState Argument für die createStore-Funktion bereit.

Anstatt also von dem, was Sie getan haben, werden Sie etwas wie dies tun wollen:

... 
let combineReducer = combineReducers({ 
    listing: ListingReducer //function 
    dialog: DialogShowHideReducer //function 
}); 

let initialState = ... // your initial state here 
return createStore(combineReducer, initialState); 
... 
+0

Wenn ich unterschiedliche Daten zu unterschiedlichen Unter Reduzierungen übergeben wollen. Wie weiß 'createStore', an welchen der Unterreduzierer die Daten gesendet werden? – RedGiant

+0

Es weiß auf die gleiche Weise, wie es "weiß", wie bestimmte Aktionen an bestimmte Reduzierungen gesendet werden. Sie sollten in den Quellcode für Redux eintauchen, oder vielleicht Dan Abramovs exzellentes Tutorial hier durchgehen: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree?series=getting-started- with-redux um mehr zu erfahren. –

Verwandte Themen