reactjs redux tookit在使用中间件构建器函数时,必须返回中间件数组

y0u0uwnf  于 2023-06-05  发布在  React
关注(0)|答案(3)|浏览(230)

所以我得到了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;

我不知道哪里出了问题,搜索似乎没有返回任何有用的结果。

flvlnr44

flvlnr441#

configureStore from redux-toolkit(RTK)的工作方式与reduxcreateStore函数不同。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还附带了自定义优化:
1.默认情况下启用devTools,只有在您有自定义需求时才会使用此选项。

  1. Thunk中间件也已经包含在默认中间件中,例如如果没有提供middleware属性,则提供getDefaultMiddleware并返回以下中间件值,其中包括thunk中间件:
const middleware = [
  actionCreatorInvariant,
  immutableStateInvariant,
  thunk, // <-- included thunk middleware!
  serializableStateInvariant,
]

同样,如果您需要定制immutabilityserialization中间件,则实际上只需要指定middleware属性。
您的商店配置可以简化为以下内容:

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

const rootReducer = combineReducers({});

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

export default store;

Thunk中间件和开发工具都将处于活动状态并正常工作。

7fyelxc5

7fyelxc52#

您遇到的错误是由Redux中applyMiddleware函数的错误使用引起的。在Redux Toolkit中,configureStore函数已经在内部应用了中间件,因此您不需要单独使用applyMiddleware
下面是正确的代码:

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

 const rootReducer = combineReducers({});

 const store = configureStore({
  reducer: rootReducer,
  middleware: [thunk],
  devTools: process.env.NODE_ENV !== 'production',
 });

 export default store;
t9aqgxwy

t9aqgxwy3#

从这条线

const rootReducer = combineReducers({});

数组是空的,它不能是空的,我们必须放入一个切片。例如,如果你想使用userSlice,你必须像这样添加它:

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

const rootReducer = combineReducers({userSlice});

注意我向数组中添加了一个userSlice

相关问题