还原 |错误：期望减速器是一个函数答案

【问题标题】：Redux | Error: Expected the reducer to be a function还原 |错误：期望减速器是一个函数
【发布时间】：2020-04-14 18:06:30
【问题描述】：

我正在尝试在我的应用程序中使用 Redux、Redux-Thunk。我以前做过，它工作了，但在这里它一直显示错误：期望减速器是一个函数

scr/App.js;

import React, { Component } from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { Chart } from 'react-chartjs-2';
import { ThemeProvider } from '@material-ui/styles';
import { chartjs } from './helpers';
import theme from './theme';
import 'react-perfect-scrollbar/dist/css/styles.css';
import './assets/scss/index.scss';
import Routes from './Routes';
import { Provider } from 'react-redux';

// redux
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import * as actionTypes from './store/actions/actionTypes';
import rootReducer from './store/reducers/rootReducer';

const browserHistory = createBrowserHistory();

Chart.helpers.extend(Chart.elements.Rectangle.prototype, {
  draw: chartjs.draw
});

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), composeWithDevTools)
);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <ThemeProvider theme={theme}>
          <Router history={browserHistory}>
            <Routes />
          </Router>
        </ThemeProvider>
      </Provider>
    );
  }
}

当我尝试记录 rootReducer 时，它为初始加载记录了一个空行，然后应用程序中断，然后它记录了 rootReducer

src/store/rootReducer.js

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

const rootReducer = combineReducers({
  searchReducer: searchReducer
});

export default rootReducer;

src/store/reducers/searchReducer.js

import * as actionTypes from '../actions/actionTypes';

const initialState = {
  loading: false,
  result: [],
  error: ''
};

const searchReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.SEARCH_TRIGGER:
      return {
        ...state,
        loading: true,
        result: [],
        error: ''
      };
    case actionTypes.SEARCH_ERROR:
      return {
        ...state,
        loading: false,
        result: [],
        error: action.error
      };
    case actionTypes.SEARCH_SUCCESS:
      return {
        ...state,
        loading: false,
        error: '',
        result: action.result
      };
    default:
      return state;
  }
};

export default searchReducer;

src/store/actions/actionTypes.js

// create campaign actions
export const UPDATE_STEPPER_STATE = 'UPDATE_STEPPER_STATE';
export const SEARCH_TRIGGER = 'SEARCH_TRIGGER';
export const SEARCH_SUCCESS = 'SEARCH_SUCCESS';
export const SEARCH_ERROR = 'SEARCH_ERROR';

src/store/actions/stepperActions.js

import * as actionTypes from './actionTypes';

export const updateStepperState = data => {
  return {
    action: actionTypes.UPDATE_STEPPER_STATE,
    data
  };
};

在同目录下的 index.js 中导出

export { updateStepperState } from './stepperActions';

包

"react-redux": "^7.1.3",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"thunk": "0.0.1",

【问题讨论】：

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

您到 searchReducer 的路径似乎不正确。

改变这个：

import searchReducer from './searchReducer';

到这里：

import searchReducer from './reducers/searchReducer';

在您的 rootReducer.js 文件中。

它给你错误 Expected the reducer to be a function 因为searchReducer 正在返回undefined。

【讨论】：

【解决方案2】：

嘿，尝试创建这样的商店

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

我认为您不能同时使用多个商店增强器，您可以选择 compose 或 composeWIthDevTools，并根据环境创建商店，例如开发使用 composeWithDevTools 和生产使用 compose

【讨论】：