Redux和Redux Toolkit

Redux

  1. 概念:redux是react最常用的集中状态管理工具,类似于Vue中的Pinia(vuex),可以独立于框架运行
  2. 作用:通过集中管理的方式管理应用的状态

Redux快速体验

  1. 不和任何框架绑定,不使用任何构建工具,使用纯Redux实现计数器
  2. 使用步骤:
    • 定义一个reducer函数 (根据当前想要做的修改返回一个新的状态)
    • 使用createStore方法传入 reducer函数 生成一个store实例对象
    • 使用store实例的 subscribe 方法订阅数据的变化 (数据一旦变化,可以得到通知)
    • 使用store实例的 dispatch 方法提交action对象 触发数据变化 (告诉reducer你想怎么改数据)
    • 使用store实例的 getState方法 获取最新的状态数据更新到视图中

Redux管理数据流程梳理

在这里插入图片描述
为了职责清晰,数据流向明确,Redux把整个数据修改的流程分为了三个核心概念,分别是: state,action,和reducer

  1. state —— 一个对象 存放着我们管理的数据状态
  2. action—— 一个对象 用来描述你想怎么改数据
  3. reducer—— 一个函数 更具action的描述生成一个新的state

Redux 在 React中使用

在react中使用redux,官方要求安装两个其他插件 - Redux Toolkit 和 react-redux

  1. Redux Toolkit (RTK) - 官方推荐编写Redux逻辑的方式,是一套工具的集合集,简化书写方式在这里插入图片描述
  2. react-redux - 用来 链接 redux 和 react 组件的中间件在这里插入图片描述
  3. 官方推荐的使用 React 和 Redux 创建新应用的方式是使用 官方 Redux+JS 模版或 Redux+TS 模板,它基于 Create React App,利用了 Redux Toolkit 和 Redux 与 React 组件的集成.
# Redux + Plain JS template
npx create-react-app my-app --template redux# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

深入浅出Redux

基础示例

应用的整体全局状态以对象树的方式存放于单个store。唯一改变状态树 (state tree) 的方法是创建action,一个描述发生了什么的对象,并将其dispatch 给 store。要指定状态树如何相应action来进行更新,你可以编写纯reducer函数,这些函数根据旧state 和 action 来计算新的state

import { createStore } from 'redux'/*** 这是一个 reducer 函数:接受当前 state 值和描述“发生了什么”的 action 对象,它返回一个新的 state 值。* reducer 函数签名是 : (state, action) => newState** Redux state 应该只包含普通的 JS 对象、数组和原语。* 根状态值通常是一个对象。 重要的是,不应该改变 state 对象,而是在 state 发生变化时返回一个新对象。** 你可以在 reducer 中使用任何条件逻辑。 在这个例子中,我们使用了 switch 语句,但这不是必需的。* */function counterReducer (state = {value: 0}, action) {switch (action.type) {case 'counter/incremented':return { value: state.value + 1 }case 'counter/decremented':return { value: state.value - 1 }default:return state}}
// 创建一个包含应用程序 state 的 Redux store.
// 它的 API 有 {subscribe, dispatch, getState}
let store = createStore(counterReducer);
// 你可以使用subscribe() 来更新 UI 以响应 state 的更改
// 通常你会使用视图绑定库 (例如 React Redux) 而不是直接使用 subscribe()。
// 可能还有其他用例对subscribe 也有帮助
store.subscribe(() => console.log(state.getState()))// 改变内部状态的唯一方法是 dispatch 一个action。
// 这些 action 可以被序列化,记录或储存,然后再重放
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

你需要使用action这个普通对象来描述发生了什么,而不是直接改变state。然后,编写一个名为reducer的特殊函数,来决定如何基于action来更新整个应用的状态树。

在典型的Redux应用中,只有一个store以及一个根reducer函数。随着应用程序的增长,你可以将根reducer拆分为较小的reducer,分别在状态树的不同部分上进行。这就像React应用程序只有一个根组件一样,但是它是由许多小组件组成的。

对于简单的计数器应用来说,这种架构看起来过度设计,但是这种模式的优点在于它可以很好地扩展到大型和复杂的应用程序。还可以基于此设计出功能非常强大的开发者工具,因为可以跟踪每个 action 以及状态变更。你可以记录用户会话并仅通过重播每个 action 来重现它们。

Redux Toolkit示例

Redux Tookit 简化了编写Redux逻辑和设置store的过程。使用 Redux Toolkit相同逻辑如下所示:

import { createSlice, configureStore } from '@reduxjs/toolkit'const counterSlice = createSlice({// 给仓库起一个独一无二的名字name: 'counter',// 初始化状态的值initialState: {value: 0},// 简化了reducer函数reducers: {incremented: state => {// Redux Toolkit 允许在 reducers 中编写 'mutating' 逻辑。// 它实际上并没有改变state,因为使用的是 Immer 库,检测到“草稿 state” 的变化并产生一个全新基于这些更改不可变的 statestate.value +=1},decremented: state => {state.value -= 1}}})// 按需从actions对象中导出 更改状态的方式
export const { incremented, decrenebted } = counterSlice.actions
// 创建store实例,挂载reducer函数
const store = configureStore({reducer: counterSlice.reducer
})// 可以订阅 store
store.subscribe(() => console.log(store.getState()))
// 将我们所创建的 action 对象传递给 `dispatch`
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}
Redux Toolkit 包含什么
  • configureStore():封装了createStore,简化配置项,提供一些现成的默认配置项。它可以自动组合 slice 的 reducer,可以添加任何 Redux 中间件,默认情况下包含 redux-thunk,并开启了 Redux DevTools 扩展。
  • createSlice():接收一组reducer函数的对象,一个slice切片名和初始状态 initial state,并自动生成具有相应action creator 和 action type 的slice reducer
  • createReducer():帮你将action type 映射到 reducer 函数,而不是编写 switch…case语句。另外,它会自动使用immer库来让你使用普通的 mutable 代码编写更简单的immutable更新,例如 state.todos[3].completed = true
  • createAction():生成给定 action type 字符串的 action creator函数。该函数本身已定义了toString(),因此可以代替常量类型使用
  • createAsyncThunk:接收一个 action type 字符串和一个返回值为 promise 的函数, 并生成一个 thunk 函数,这个 thunk 函数可以基于之前那个 promise ,dispatch 一组 type 为 pending/fulfilled/rejected 的 action。
  • createEntityAdapter:生成一系列可复用的 reducer 和 selector,从而管理 store 中的规范化数据。
  • createSelector来源于 Reselect 库,重新 export 出来以方便使用。
Redux Toolkit 注入 React

Redux Toolkit包含一个组件,它使Redux store对应用程序的其余部分可用:

import React from 'react'
import ReactDOM from 'react-dom/client'import { Provider } from 'react-redux'
import store from './store'import App from './App'// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<Provider store={store}><App /></Provider>
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL-创建和管理表:基础知识、创建和管理数据库、创建表、修改表、重命名表、删除表、清空表、拓展

创建和管理表 1. 基础知识1.1 一条数据存储的过程1.2 标识符命名规则1.3 MySQL中的数据类型 2. 创建和管理数据库2.1 创建数据库2.2 使用数据库2.3 修改数据库2.4 删除数据库 3. 创建表3.1 创建方式13.2 创建方式23.3 查看数据表结构 4. 修改表4.1 追加一个列4.2 修改一个列4.3…

mac电脑安装软件报错:无法检查更新,请检查你的互联网连接

1、点菜单栏搜索图标&#xff0c;输入&#xff1a;终端 &#xff0c;找到后&#xff0c;点击打开 2、输入以下命令&#xff1a;&#xff08;复制粘贴进去&#xff09;回车安装 /usr/sbin/softwareupdate --install-rosetta --agree-to-license 3、提示【Install of Rosetta …

flask 访问404

当你的项目有自己的蓝图&#xff0c;有添加自己的前缀&#xff0c;也注册了蓝图。 在访问的路由那里也使用了自己的蓝图&#xff0c;如下图 然后你访问的地址也没问题&#xff0c;但是不管怎么样访问就是返回404&#xff0c;这个时候不要怀疑你上面的哪里配置错误&#xff0c;…

虚幻引擎架构自动化及蓝图编辑器高级开发进修班

课程名称&#xff1a;虚幻引擎架构自动化及蓝图编辑器高级开发进修班 课程介绍 大家好 我们即将推出一套课程 自动化系统开发。 自动化技术在项目开发的前中后期都大量运用。如何您是一家游戏公司&#xff0c;做的是网络游戏&#xff0c;是不是经常会遇到程序员打包加部署需…

免费的GPT-3.5 API服务aurora

什么是 aurora &#xff1f; aurora 是利用免登录 ChatGPT Web 提供的无限制免费 GPT-3.5-Turbo API 的服务&#xff0c;支持使用 3.5 的 access 调用。 【注意】&#xff1a;仅 IP 属地支持免登录使用 ChatGPT的才可以使用&#xff08;也可以自定义 Baseurl 来绕过限制&#x…

Flutter中间镂空的二维码扫描控件

1、UI效果图&#xff1a; 2、中间镂空UI&#xff1a; class CenterTransparentMask extends CustomClipper<Path> {final double? width;CenterTransparentMask({this.width});overridePath getClip(Size size) {final path Path()..addRect(Rect.fromLTWH(0, 0, size…

cfDNAPro|cfDNA片段数据生物学表征及可视化的R包

文章目录 前言cfDNAProdemo1.片段长度可视化2.片段长度分布比较3.可视化DNA片段模态长度4.片段化振荡模式比较5. ggplot2美化 前言 cfDNA&#xff08;无细胞DNA&#xff0c;游离DNA&#xff0c;Circulating free DNA or Cell free DNA&#xff09;是指在血液循环中存在的DNA片…

Mac安装配置ElasticSearch和Kibana 8.13.2

系统环境&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) 一、准备 从Elasticsearch&#xff1a;官方分布式搜索和分析引擎 | Elastic上下载ElasticSearch和Kibana 笔者下载的是 elasticsearch-8.13.2-darwin-aarch64.tar.gz kibana-8.13.2-darwin-aarch64.tar.gz 并放置到个人…

社交网络的分布式治理:分析Facebook在区块链社区中的角色

随着区块链技术的快速发展&#xff0c;社交网络的治理模式也逐渐受到关注。传统的社交网络往往由中心化的平台掌控&#xff0c;用户的权力和参与度受到限制&#xff0c;而区块链技术为社交网络的分布式治理提供了新的解决方案。本文将深入探讨社交网络的分布式治理&#xff0c;…

电脑突然读不到硬盘了怎么回事 电脑突然读不到硬盘了数据怎么办 固态硬盘恢复软件 easyrecovery免费下载

硬盘是操作系统数据的载体&#xff0c;数据由磁头从硬盘盘片上的磁道中读取出来&#xff0c;然后传递给硬盘上的缓存芯片&#xff0c;再由接口从缓存芯片中将数据发送到Ultra ATA通道&#xff0c;之后传到系统&#xff0c;这就是电脑读取硬盘数据的过程。本篇文章&#xff0c;我…

从 0 搭建公司Jenkins服务 Centos7

从 0 搭建公司Jenkins服务 Centos7 安装 (运维人员) 安装环境 配置DNS安装JDK17安装Jenkins安装Docker安装GIT安装Ansible启动Jenkins安装插件配置凭据配置共享库配置 (开发经理)使用 (开发、测试人员) 安装 (运维人员) 安装环境 配置DNS 新安装系统的服务器无法解析域名&a…

hal库实现串口通信——阻塞式 API

1STM32CobeMX设置 设置时钟源 rcc设置为外部时钟High Speed Clock (HSE)//设置为如图 再将其设置为72MHz 设置串口引脚为异步通信 设置波特率等 设置波特率范围提示点击波特率再点击图中的 我的设置 再打开中断 即可生成代码//省略项目设置 2代码设置 函数 HAL_UART_Trans…

docker使用canal

1. 准备MySql主库 1.1.在服务器新建文件夹 mysql/data&#xff0c;新建文件 mysql/conf.d/my.cnf 其中my.cnf 内容如下 [mysqld] log_timestampsSYSTEM default-time-zone8:00 server-id1 log-binmysql-bin binlog-do-db mall # 要监听的库 binlog_formatROW配置解读&#…

微服务-6 Gateway网关

一、网关搭建 此时浏览器访问 localhost:10010/user/list 后正常返回数据&#xff0c;说明网关已生效&#xff0c;其原理流程图如下&#xff1a; 二、网关过滤器 作用&#xff1a;处理一切进入网关的请求和微服务响应。 1. 网关过滤器的分类&#xff1a; a. 某个路由的过滤器 …

CSS实现三栏自适应布局(两边固定,中间自适应)

绝对定位的元素会脱离文档流&#xff0c;它们是相对于包含块&#xff08;通常是最近的具有相对定位、绝对定位或固定定位属性的父元素&#xff09;进行定位的。当你把一个绝对定位的元素的高度设置为100%时&#xff0c;它会相对于其包含块的高度来确定自己的高度。如果包含块是…

技术解析:应对国内大流量攻击的新挑战与分布式清洗防御策略

近日&#xff0c;国内网络环境中出现的大流量攻击事件频发&#xff0c;且攻击规模呈指数级增长&#xff0c;部分攻击流量甚至超过了1.5Tbps。 这背后的主要原因是攻击者利用海外流量资源&#xff0c;通过复杂的网络技术和协议转换&#xff0c;将国际IPv4/IPv6流量巧妙伪装并转…

python篇---图片转成视频

python篇—图片转成视频 import cv2 import os# 设置图片文件夹路径和视频输出路径 image_folder /workspace/11 video_name output_video.mp4# 获取图片文件夹中的所有图片文件名&#xff0c;并按顺序排序 images [img for img in os.listdir(image_folder) if img.endswi…

C++的引用和内联函数,auto

什么是引用 引用就是取别名 可以给一个变量取多个别名,也可以给别名取别名 别名与本名拥有同一地址,对任意别名修改,也会同时修改其他别名和本名 引用的作用 引用的作用与指针重叠度很高 图中函数的参数int& a,int& b,a是x的别名,b是y的别名 则ab的交换就是xy的交…

怎么快速围绕“人、货、场”做零售数据分析?

做零售数据分析多了&#xff0c;不难发现零售数据分析的关键就是“人、货、场”&#xff0c;那么怎么又快又灵活地分析这三个关键点&#xff1f;不妨参考下奥威BI零售数据分析方案。 奥威BI零售数据分析方案是一套吸取大量项目经验&#xff0c;结合零售企业数据分析共性需求打…

【Java8新特性】四、强大的Stream api

​ 这里写自定义目录标题 一、了解Stream二、流(stream)到底是什么&#xff1f;三、Stream操作的三个步骤四、创建Stream的四种方式五、Stream 的中间操作1、筛选和切片2、map 映射3、排序 六、Stream 的终止操作1、查找和匹配2、归约3、收集 一、了解Stream Stream是Java8中…