【问题标题】:Error: Expected the root reducer to be a function. Instead, received: 'undefined'错误:预计根减速器是一个函数。相反,收到:'未定义'
【发布时间】:2021-07-09 23:33:34
【问题描述】:

我一直遇到这个错误!

错误:预计根减速器是一个函数。相反,收到:'undefined'

我已经尝试了所有我能找到的答案都无济于事,这里有所有相关的东西!

Root Reducer

const createRootReducer = (history) => {
      combineReducers({
        router: connectRouter(history),
        createUser: signupReducer,
      });
    };

    export default createRootReducer;

const Root = ({ children, initialState = {} }) => {
  const history = createBrowserHistory();
  const middleware = [thunk, routerMiddleware(history)];

  const store = createStore(rootReducer(history), initialState, applyMiddleware(...middleware));

  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>{ children }</ConnectedRouter>
    </Provider>
  );
};

export default Root;

应用

function App() {
  return (
    <div className="App">
      <Root>
        <ToastContainer hideProgressBar={true} newestOnTop={true} />
        <Navbar />
        <Landing />
        <PostList />
      </Root>
    </div>
  );
}

export default App;

以及注册缩减程序

export const signupReducer = (state = initialState, action) => {
  switch (action.type) {
    case UserTypes.CREATE_USER_SUBMITTED:
      return {
        usernameError: "",
        passwordError: "",
        isSubmitted: true
      };
    case UserTypes.CREATE_USER_SUCCESS:
      return {
        usernameError: "",
        passwordError: "",
        isSubmitted: false
      };
    case UserTypes.CREATE_USER_ERROR:
        const err = {
        usernameError: "",
        passwordError: "",
        isSubmitted: false
      };
      if(action.errorData.hasOwnProperty('username')){
        err.usernameError = action.errorData['username'];
      }
      if(action.errorData.hasOwnProperty('password')){
        err.passwordError = action.errorData['password'];
      }
      return err;
    default:
      return state
  }
}

这是在根组件中引发错误的行

  const store = createStore(rootReducer(history), initialState, applyMiddleware(...middleware));

感谢您的宝贵时间!

【问题讨论】:

  • 您的“createRootReducer”方法没有返回任何内容。它应该返回一个函数吗?
  • 是的!它是!那是我的问题。非常感谢您花时间查看!

标签: reactjs redux react-redux thunk


【解决方案1】:

你需要返回组合reducer。

const createRootReducer = (history) => {
  return combineReducers({
    router: connectRouter(history),
    createUser: signupReducer,
  });
};

或者使用箭头函数隐式返回。

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  createUser: signupReducer,
});

【讨论】:

  • 哇!我花了几个小时寻找那个!非常感谢!我很感激你
  • @MannyLedoux 非常欢迎。如果此答案已充分解决您的问题/问题,那么我邀请您将其标记为已接受 (stackoverflow.com/help/someone-answers)。不要忘记为您在 stackoverflow 上找到的有用且有用的问题、答案和 cmets 投票。干杯,祝你好运。
  • 太棒了!我继续做了!这里仍然是stackoverflow noobie!祝朋友周末愉快
【解决方案2】:
  • 当您最初在项目中设置 redux 并且尚未创建任何 reducer 时,会出现此错误。
  • 所以你必须用 Dummy Reducer 来欺骗 Redux。
    例如:

export default combineReducers({ 
  test: () => 'test reducer' 
});
  • 在此处创建减速器绑定后
    例如:

import { combineReducers } from 'redux'; 
import productReducer from './productReducer'

export default combineReducers({ 
  products: productReducer 
})

【讨论】:

    猜你喜欢
    • 2023-01-29
    • 2016-07-22
    • 1970-01-01
    • 2021-10-18
    • 2020-04-14
    • 2018-11-20
    • 1970-01-01
    • 2022-01-04
    • 2017-09-07
    相关资源
    最近更新 更多