Reactjs redux 工具包使用中间件构建器函数时，必须返回一个中间件数组

发布于06月03日

所以我要拿到Uncaught Error: when using a middleware builder function, an array of middleware must be returned

这是我的代码

import {
  configureStore,
  compose,
  combineReducers,
  applyMiddleware
} from "@reduxjs/toolkit";
import thunk from "redux-thunk";

const rootReducer = combineReducers({});

const middleware = applyMiddleware(thunk);
const composeWithDevTools = 
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const composedMiddleWare = composeWithDevTools(middleware)

const store = configureStore({
  reducer: rootReducer,
  middleware: composedMiddleWare,
  devTools: 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
})

export default store;

我不知道出了什么问题，搜索似乎没有返回任何有用的结果.

推荐答案

redux-toolkit中的configureStore(RTK)与redux createStore函数的工作方式不同.middleware属性接受要安装的一组中间件，RTK处理应用它们.

见configureStore

/**
 * An array of Redux middleware to install. If not supplied, defaults to
 * the set of middleware returned by `getDefaultMiddleware()`.
 */
middleware?: ((getDefaultMiddleware: CurriedGetDefaultMiddleware<S>) => M) | M

请注意，虽然applyMiddleware是从redux再出口的，但

您应该不需要直接使用它.

以下是您将使用的代码:

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import thunk from "redux-thunk";

const rootReducer = combineReducers({});

const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk], // <-- array of middlewares to install/apply
  devTools: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
});

export default store;

RTK还附带了固执己见的优化:

默认情况下，devTools是启用的，只有当您有自定义需求时才会使用此选项.
THUNK中间件也已经包括在default middleware中，例如，如果没有提供middleware属性，则提供getDefaultMiddleware，并返回以下中间件值，其中包括thunk中间件:
```
const middleware = [
  actionCreatorInvariant,
  immutableStateInvariant,
  thunk, // <-- included thunk middleware!
  serializableStateInvariant,
]
```
同样，如果您需要定制immutability或serialization个中间件，那么您实际上只需要指定middleware属性.

您的store 配置可以减少到以下几点:

import { configureStore, combineReducers } from "@reduxjs/toolkit";

const rootReducer = combineReducers({});

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

export default store;

Thunk中间件和开发工具都将处于活动和工作状态.