javascript - 当 combineReducer 传入时，React-Redux createStore 抛出 "Error: Expected the reducer to be a function"

Question

晚上好，我似乎在使用 createStore 函数时遇到了一些问题。

这是整个 store.js 文件

// Import required redux functions
import { createStore, applyMiddleware, compose } from 'redux';
// Import thunk for async redux reducers
import thunk from 'redux-thunk';
// import the main reducer
import rootReducer from './reducers';
console.log(rootReducer); // log the value of the root reducer to the console for inspection
// Define the store as a constant so it acts like a singleton (for authentication reasons this is helpfull)
const store = createStore(rootReducer, compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension : f => f
));
console.log(store); // log the store to the console for inspection (does not happen)
// export it as the default object
export default store;

还有简单的 reducers/index.js 文件:

// Import the core function
import { combineReducers } from 'redux';
// Import all the reducers
import loginReducer from './loginReducer'; // a simple working reducer for handling the jwt token

console.log(loginReducer); // log the reducer for inspection
// export the combination of reducers within their own subroutes
const rootReducer = combineReducers({
  // TODO add reducers with keys like so
  login: loginReducer,
});

export default rootReducer;

和 loginreducer.js 文件:

// the default state configuration
const initialState = {logged_in: false, error: null, token: null}
// login reducer
export default (state = initialState, action) => {
  switch (action.type) { // check the type of action that was passed in
    case "LOGIN_ERROR": // error during the login process
      return {logged_in: false, error: action.error, token: null}
    case "LOGIN_SUCCESS": // login was successfull or....
    case "LOGIN_NEW_TOKEN": // client has recived a new token
      return {logged_in: true, error: null, token: action.token}
    case "LOG_OUT": // the client has logged out
      localStorage.removeItem('token'); // remove the token from storage
      return initialState // return the inital state (not logged in)
    default:
      return state // return the current state (a.k.a take no action)
  }
}

这会引发自定义错误 Error: Expected the reducer to be a function 在 createStore.js 的第 46 行(https://github.com/reactjs/redux/blob/master/src/createStore.js#L46，在构建版本中为 55)定义:

if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.');
  }

但是，当我使用 chrome 调试工具将 rootReducer 保存到控制台(作为 temp1)并检查它的类型时，它确实是 “函数” 。

在 createStore.js 中的条件上添加断点显示 reducer 设置为 undefined，知道如何定义它对于 console.log 调用，但在传递给下一行的函数时未定义？

对我做错了什么有什么想法吗？

Answer 1

晚上好

我发现了问题。在 store.js 我忘记在 devToolsExtension 调用之后添加 () 。或者换句话说:

window.devToolsExtension ? window.devToolsExtension : f => f

应该是这样的:

window.devToolsExtension ? window.devToolsExtension() : f => f

简单但烦人。