第54节—— redux-toolkit中的configureStore

一、概念

configureStore是Redux Toolkit中的一个工厂函数,用于创建Redux store。它的目的是简化Redux store的设置,并提供许多默认设置和内置的中间件,使其更易于使用。

import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  // 一系列选项
});

二、选项详解

1、reducer

reducer是必选项,指定应用程序的根reducer函数。可以是一个单独的reducer函数,也可以是由多个reducer函数组成的对象。如果传递一个对象,则每个键将映射到应用程序状态中的相应属性。

2、preloadedState

应用程序的初始状态。这可以是从服务器获取的数据或以其他方式获得的数据。简单理解为初始化的state

3、middleware

是一个数组,其中包含应用程序使用的所有中间件。默认情况下,configureStore将使用以下中间件

redux-thunk: 支持使用异步action创建函数

redux-immutable-state-invariant: 检查状态是否被修改

redux-logger: 记录Redux操作日志

4、devTools

一个布尔值,用于启用或禁用Redux DevTools。如果值为true,则可以使用Redux DevTools来查看应用程序状态和操作日志。默认为true。

5、enhancers

它是一个数组,其中包含一组enhancer函数。enhancer是一种功能强大的Redux工具,可以用于增强或修改Redux store的行为。可用于添加Redux中间件、增强Redux DevTools或使用其他工具。

6、replayThunk

它是一个布尔值,指示是否要重放thunk中的操作日志。如果设置为true,则Redux store将回放thunk操作的历史记录,以便应用程序状态在重新加载时与之前一致。默认为false

7、serializableCheck

它一个布尔值,用于启用或禁用Redux默认的序列化检查。序列化检查可确保Redux store的状态可以被序列化为JSON字符串,并在重启应用程序时保持不变。默认为true。

8、serializableCheckOptions

一个对象,其中包含用于自定义序列化检查的选项。可用于更改序列化检查的错误消息或更改允许的数据类型。

三、总结

configureStore函数是一个创建Redux store的快捷方式,为开发者提供了一些常用的设置和默认选项,从而加快了开发速度。在大多数情况下,使用默认设置就足够了,但如果需要自定义更多的选项,也可以通过传递一个选项对象来进行更改

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你的代码看起来基本上是正确的,但有一个小问题。在使用`persistReducer`时,你应该传递一个包含所有reducer的根reducer,而不是单个reducer。 在你的代码,`setUserInfo`是一个单个reducer。如果你只有一个reducer,你可以直接将其作为根reducer传递给`configureStore`。如果你有多个reducer,你需要使用`combineReducers`函数创建一个根reducer。 这里是一个修正后的代码示例: ```javascript import { configureStore, combineReducers } from "@reduxjs/toolkit"; import { persistStore, persistReducer } from "redux-persist"; import storage from "redux-persist/lib/storage"; // 默认使用LocalStorage import userReducer from "./reducers/userSlice"; const persistConfig = { key: "root", storage, }; const rootReducer = combineReducers({ user: userReducer, }); const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, }); export const persistor = persistStore(store); ``` 在这个示例,我假设你有一个名为`userSlice.js`的文件作为用户信息的reducer,并将其命名为`userReducer`。通过使用`combineReducers`函数,我将它与其他可能存在的reducer组合成一个根reducer。 然后,我使用`persistReducer`将根reducer和持久化配置包装起来,创建一个持久化的reducer。最后,我按照你之前的方式配置了`store`和`persistor`。 请根据你的实际应用程序结构和需求进行调整。希望这可以帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值