Javascript React+Redux - 未捕获的错误：期望 reducer 是一个函数

React+Redux - Uncaught Error: Expected the reducer to be a function

提问by Matt

I tried simple react,redux,ajax working example and followed Reddit API tutorial, but I cannot create store and get error:

我尝试了简单的 react、redux、ajax 工作示例并遵循Reddit API 教程，但我无法创建商店并出现错误：

Uncaught Error: Expected the reducer to be a function.

index.jsx

索引.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

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;

Type of rootReducer is object, but why? Should I change createStorefunction to rootReducer.default?

rootReducer 的类型是对象，但为什么呢？我应该将createStore功能更改为rootReducer.default?

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

package.json

包.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",

采纳答案by Tom

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

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

The initial state is then created automatically from the initial states returned by the individual reducer functions. These individual states can be accessed as state.productsand state.specialPosts

然后从各个减速器函数返回的初始状态自动创建初始状态。这些单独的状态可以作为state.products和state.specialPosts

回答by Mike Lambert

The problem was due to rootReducer being imported by "require" (ES5):

问题是由于“require”（ES5）导入了 rootReducer：

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

If you import it via the ES6 method, it will correctly save the rootReducer.js' default automatically into rootReducer as you expected:

如果你通过 ES6 方法导入它，它会像你预期的那样正确地将 rootReducer.js 的默认值自动保存到 rootReducer 中：

import rootReducer from './reducers';

I see you are mixing ES5 (require) and ES6 (import) in that file...I was mixing in my project as well, which is why I ran into this problem. More information can be found here: https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.2x2p2dx3m

我看到你在那个文件中混合了 ES5（需要）和 ES6（导入）......我也在我的项目中混合，这就是我遇到这个问题的原因。更多信息可以在这里找到：https: //medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0#.2x2p2dx3m

回答by KARTHIKEYAN.A

When you create store first argument must be function that means reduce(()=>[]) parameter

创建 store 时，第一个参数必须是函数，这意味着 reduce( ()=>[]) 参数

Error:

错误：

import {createStore,applyMiddleware} from 'redux';


export default function configureStore(initialState) {
  return createStore(
    [],
    {},
    applyMiddleware()
  );
}

Solution:

解决方案：

import {createStore,applyMiddleware} from 'redux';


export default function configureStore(initialState) {
  return createStore(
    ()=>[],
    {},
    applyMiddleware()
  );
}

回答by KARTHIKEYAN.A

rootReducer

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;

回答by Matthis Kohli

I use VS Code Insiders and sometimes changes are not saved correctly. So if you followed all of the above and the error is still there go to each file and press STRG+S. It solved the issue for me.

我使用 VS Code Insiders，有时无法正确保存更改。因此，如果您按照上述所有操作并且错误仍然存​​在，请转到每个文件并按 STRG+S。它为我解决了这个问题。