第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
    评论
要安装redux-toolkit,你可以按照以下步骤进行操作: 1. 在你的项目打开终端或命令行界面。 2. 运行以下命令来安装redux-toolkit: ``` npm install @reduxjs/toolkit ``` 或者如果你使用的是yarn,可以运行以下命令: ``` yarn add @reduxjs/toolkit ``` 3. 安装完成后,你可以在你的代码引入redux-toolkitconfigureStore函数,例如: ```javascript import { configureStore } from '@reduxjs/toolkit'; ``` 4. 接下来,你可以使用configureStore函数来创建和配置你的Redux store。你可以在reducer参数传入你的reducer函数,或者使用combineReducers函数来合并多个reducer。例如: ```javascript import { configureStore, combineReducers } from '@reduxjs/toolkit'; // 导入你的reducer函数 import counterReducer from './reducers/counterReducer'; import todosReducer from './reducers/todosReducer'; // 合并多个reducer const rootReducer = combineReducers({ counter: counterReducer, todos: todosReducer, }); // 创建Redux store const store = configureStore({ reducer: rootReducer, }); ``` 5. 现在你已经成功安装了redux-toolkit并创建了Redux store,你可以在你的React组件使用Provider组件来将store传递给你的应用程序。例如: ```javascript import React from 'react'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ``` 这样,你就可以在你的React组件使用Redux store了。 #### 引用[.reference_title] - *1* *3* [redux toolkit 傻瓜教学](https://blog.csdn.net/wangyangnuli/article/details/122520675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Redux流程分析 传统流程和redux-toolkit的使用](https://blog.csdn.net/qq_23539691/article/details/119720636)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值