Redux thunk - 未捕获的类型错误：中间件不是函数

Question

我是一个完全的初学者，我正在遵循有关 redux thunk 的教程并不断收到此错误：

redux.js:642 Uncaught TypeError: middleware is not a function
    at redux.js:642:1
    at Array.map (<anonymous>)
    at redux.js:641:1
    at HTMLDocument.main (bootstrap.js:21:22)

这是行：

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

这是我的代码：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import reducers from "./reducers";

import thunk from 'redux-thunk';


const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

import "./style/main.scss";

import Home from "./components/home";
import Results from "./components/results";


function main() {
  ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}>
      <BrowserRouter>
        <Switch> 
            <Route path='/' exact component={Home}/>
            <Route path='/results' component={Results}/> 
        </Switch>
      </BrowserRouter>
    </Provider>,
    document.querySelector(".app-wrapper")
  );
}

document.addEventListener("DOMContentLoaded", main);

我唯一可以补充的是它适用于我的tutot，但教程相当旧。在我的代码中，“createStore”和“ReactDOM.render(”被划掉了。

我们几乎没有得到任何解释（不要告诉我离开课程，因为我不能），我自己阅读了每件事的内容，但仍然不太理解。这是我的第一个方法。

我已阅读其他问题并将导入更改为：

import {thunk} from 'redux-thunk';

我也尝试过：

const store = createStore(
  reducers,
  applyMiddleware(thunk)
);

npm 安装 redux redux-thunk react-redux

我也不知道除此之外我是否需要更改其他任何内容。

Answer 1

错误导入 Thunk 时通常会出现此错误。

thunk

是当前版本中的 named 导出，因此

import { thunk } from 'redux-thunk';

是正确的。您可以查看我的回答这里了解更多详情。

也就是说，您的 Redux 存储设置/使用非常不规则。通常，您将

applyMiddleware(thunk)

传递给已弃用/旧版

createStore

函数以及减速器等。您似乎还会在每次

main

渲染时创建一个新存储，因为您是在 props 中内联创建它。您应该在 React 树之外创建 Redux 存储，以便将其作为稳定的参考提供给应用程序。如果 reactDOM.render 也被划掉，则可能意味着您正在使用 React 18，它稍微改变了应用程序的安装方式。 示例：

import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import { thunk } from 'redux-thunk';
import { BrowserRouter, Switch, Route } from "react-router-dom";

import reducers from "./reducers";
import "./style/main.scss";
import Home from "./components/home";
import Results from "./components/results";

const store = createStore(
  reducers,
  applyMiddleware(thunk),
);

function main() {
  const rootElement = document.getElementById("app-wrapper");
  const root = createRoot(rootElement);

  root.render(
    <Provider store={store}>
      <BrowserRouter>
        <Switch> 
          <Route path='/results' component={Results} /> 
          <Route path='/' component={Home} />
        </Switch>
      </BrowserRouter>
    </Provider>
  );
}

也就是说，您尝试使用的 Redux 代码被认为是过时的。当前的 Redux 是使用

Redux-Toolkit

 (RTK) 编写的，它简化了存储创建并大大减少了需要编写的样板文件的数量。 RTK 还具有开箱即用的 Thunk 中间件的优势。更新示例可能如下所示：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import rootReducer from "./reducers";
import "./style/main.scss";
import Home from "./components/home";
import Results from "./components/results";

const store = configureStore({
  reducer: rootReducer,
});

function main() {
  const rootElement = document.getElementById("app-wrapper");
  const root = createRoot(rootElement);

  root.render(
    <Provider store={store}>
      <BrowserRouter>
        <Switch> 
          <Route path='/results' component={Results} /> 
          <Route path='/' component={Home} />
        </Switch>
      </BrowserRouter>
    </Provider>
  );
}