Reagieren + Redux - nicht erfasste Fehler: Erwartet die Minderer eine Funktion sein

Question

Ich versuchte einfach reagieren, redux, Ajax Arbeitsbeispiel und folgte Reddit API tutorial, aber ich kann nicht Speicher erstellen und Fehler:

Uncaught Error: Expected the reducer to be a function. 

Index. jsx

...

import { createStore, applyMiddleware } from 'redux' 
var thunkMiddleware = require('redux-thunk'); 
var createLogger = require('redux-logger'); 
var rootReducer = require('./reducers.js'); 

     const loggerMiddleware = createLogger(); 

     function configureStore(initialState) { 
      return createStore(
       rootReducer, 
       initialState, 
       applyMiddleware(
        thunkMiddleware, 
        loggerMiddleware 
       ) 
      ) 
     } 

     const store = configureStore(); 

...

rootReducer.js

import { combineReducers } from 'redux'; 

function products(state = { 
    isFetching: false, 
    didInvalidate: false, 
    items: [] 
}, action) { 
    switch (action.type) { 
     case 'REQUEST_PRODUCTS': 
      return Object.assign({}, state, { 
       isFetching: true, 
       didInvalidate: false 
      }) 
     case 'RECEIVE_PRODUCTS': 
      return Object.assign({}, state, { 
       isFetching: false, 
       didInvalidate: false, 
       items: action.posts, 
       lastUpdated: action.receivedAt 
      }) 
     default: 
      return state 
    } 
} 

function specialPosts(state = { }, action) { 
    switch (action.type) { 
     case RECEIVE_SPECPOSTS: 
     case REQUEST_SPECPOSTS: 
      return Object.assign({}, state, { 
       req: true 
      }) 
     default: 
      return state 
    } 
} 

const rootReducer = combineReducers({ 
    products, 
    specialPosts 
}); 

export default rootReducer; 

Typ rootReducer ist Objekt, aber warum? Sollte ich die createStore Funktion zu rootReducer.default ändern?

return createStore(
    rootReducer.default, 
    initialState, 
    applyMiddleware(
     thunkMiddleware, 
     loggerMiddleware 
    ) 
) 

package.json

"redux-logger": "^2.6.1", 
"react-redux": "^4.4.1", 
"react-redux-provide": "^5.2.3", 
"redux": "^3.3.1", 
"redux-thunk": "^2.0.1", 

Answer 1

const rootReducer = combineReducers({ 
    products, 
    specialPosts 
}); 

const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); 

Der Anfangszustand dann durch die einzelnen Minderer Funktionen zurückgegeben automatisch von den Anfangszuständen erzeugt wird. Diese einzelnen Staaten können als state.products und state.specialPosts

Answer 2

Das Problem war aufgrund rootReducer werden importiert von „require“ (ES5) zugegriffen werden:

var rootReducer = require('./reducers.js'); 

Wenn Sie es über das ES6 Methode importieren, wird es richtig sparen Inhalt des Standard rootReducer.js automatisch in rootReducer wie erwartet:

import rootReducer from './reducers'; 

ich sehe Sie ES5 mischen (erforderlich) und ES6 (Import) in dieser Datei ... ich war auch in meinem Projekt mische, die Deshalb bin ich auf dieses Problem gestoßen. Weitere Informationen finden Sie hier: https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.2x2p2dx3m

Answer 3

rootReducer

/* index.js */ 

import AppReducer from './reducers'; 
// import {AppReducer} from './reducers'; 
// bugs : must be a root reducer, can not be use as a module 









/* reducers.js */ 

// initial state 
const initialState = { 
    angular: 0, 
    react: 0, 
    vuejs: 0 
}; 


// reducers update state 
const AppReducers = (state = initialState, action) => { 
    switch (action.type) { 
     case 'VOTE_ANGULAR': 
      console.log("Vote Angular!"); 
      return (
       Object.assign(
        {}, 
        state, 
        { 
         angular: state.angular + 1 
        } 
       ) 
      ); 
     case 'VOTE_REACT': 
      console.log("Vote React!"); 
      return (
       Object.assign(
        {}, 
        state, 
        { 
         react: state.react + 1 
        } 
       ) 
      ); 
     case 'VOTE_VUEJS': 
      console.log("Vote Vue.jsc!"); 
      return (
       Object.assign(
        {}, 
        state, 
        { 
         vuejs: state.vuejs + 1 
        } 
       ) 
      ); 
     default: 
      return state; 
    } 
}; 

export {AppReducers}; 
export default AppReducers; 

Answer 4

Ich benutze VS-Code Insider und manchmal Änderungen werden nicht korrekt gespeichert. Wenn Sie also alle obigen Schritte befolgt haben und der Fehler immer noch auftritt, gehen Sie zu jeder Datei und drücken STRG + S. Es hat das Problem für mich gelöst.