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” 的变化并产生一个全新基于这些更改不可变的 state
            state.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>
)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp小程序编译报错

说明 微信小程序编译每次都出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, 解决 找到manifest.json文件 添加&#xff1a;"libVersion": "latest"&#xff0c;重新编译即可。

MySQL limit N offset M 速度慢?来实际体验下

直接开始 有一张表&#xff1a;trade_user&#xff0c;表结构如下&#xff1a; mysql> desc trade_user; ------------------------------------------------------------------ | Field | Type | Null | Key | Default | Extra | -------------…

记一次IP访问MySQL失败多次被自动锁定导致无法连接问题,解决方法只需一条SQL。

&#x1f469;&#x1f3fd;‍&#x1f4bb;个人主页&#xff1a;阿木木AEcru &#x1f525; 系列专栏&#xff1a;《Docker容器化部署系列》 《Java每日面筋》 &#x1f4b9;每一次技术突破&#xff0c;都是对自我能力的挑战和超越。 前言 今天下午还在带着耳机摸鱼&#xff…

Linux CentOS 安装 MySQL 服务教程

Linux CentOS 安装 MySQL 服务教程 1. 查看系统和GNU C库(glibc)版本信息 1.1 查询机器 glibc 版本信息 glibc&#xff0c;全名GNU C Library&#xff0c;是大多数Linux发行版中使用的C库&#xff0c;为系统和应用程序提供核心的API接口。在Linux系统中&#xff0c;特别是在…

动态规划-入门理解

一、什么情况可以使用动态规划 动态规划 最优子结构 重叠子问题 转移方程 最优子结构&#xff1a;保证能从局部解推出全局解&#xff0c;也就是保证能够写出转移方程 重叠子问题&#xff1a;说明暴力解法太耗时&#xff0c;我们可以使用动态规划进行优化 转移方程&#xff…

自用---

零、环境配置 keil代码补全 keil pack包 cubemx配置安装包 一、LED cubemx配置PD2引脚为输出模式 uint16_t led_value 0x00; void led_set(uint8_t led_dis) {HAL_GPIO_WritePin(GPIOC,GPIO_PIN_All,GPIO_PIN_SET);HAL_GPIO_WritePin(GPIOC,led_dis<<8,GPIO_PIN_R…

03-JAVA设计模式-桥接模式

桥接模式 什么是桥接模式 桥接模式&#xff08;Bridge Pattern&#xff09;是一种将抽象与实现解耦的设计模式&#xff0c;使得二者可以独立变化。在桥接模式中&#xff0c;抽象部分与实现部分通过一个桥接接口进行连接&#xff0c;从而允许抽象部分和实现部分独立演化。 场…

服务器docker应用一览

文章目录 一、简单需求二、业务流程三、运行效果四、实现过程1. 前提2. 源码3.核心代码4. 项目打包5、部署 一、简单需求 现有某云主机服务器&#xff0c;用来做项目演示用&#xff0c;上面运行了docker应用&#xff0c;现希望有一总览页面&#xff0c;用来展示部署的应用。 …

微信小程序实现输入appid跳转其他小程序

前言 本文记录wx.navigateToMiniProgram打开另一个小程序API使用方法&#xff0c;并封装为组件。 wxml 部分 输入框用来记录appid&#xff0c;按钮用来查询并跳转。 <view class"container"><input class"input" placeholder"请输入要查…

Linux: softirq 简介

文章目录 1. 前言2. softirq 实现2.1 softirq 初始化2.1.1 注册各类 softirq 处理接口2.1.2 创建 softirq 处理线程 2.2 softirq 的 触发 和 处理2.1.1 softirq 触发2.1.2 softirq 处理2.1.2.1 在 中断上下文 处理 softirq2.1.2.2 在 ksoftirqd 内核线程上下文 处理 softirq 3.…

Facial Micro-Expression Recognition Based on DeepLocal-Holistic Network 阅读笔记

中科院王老师团队的工作&#xff0c;用于做微表情识别。 摘要&#xff1a; Toimprove the efficiency of micro-expression feature extraction,inspired by the psychological studyof attentional resource allocation for micro-expression cognition,we propose a deep loc…

HTTP与HTTPS:深度解析两种网络协议的工作原理、安全机制、性能影响与现代Web应用中的重要角色

HTTP (HyperText Transfer Protocol) 和 HTTPS (Hypertext Transfer Protocol Secure) 是互联网通信中不可或缺的两种协议&#xff0c;它们共同支撑了全球范围内的Web内容传输与交互。本文将深度解析HTTP与HTTPS的工作原理、安全机制、性能影响&#xff0c;并探讨它们在现代Web…

[leetcode]remove-duplicates-from-sorted-list-ii

. - 力扣&#xff08;LeetCode&#xff09; 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5]示例 2&…

百度OCR身份证识别C++离线SDKV3.0 C#对接

百度OCR身份证识别C离线SDKV3.0 C#对接 目录 说明 效果 问题 项目 代码 下载 说明 自己根据SDK封装了动态库&#xff0c;然后C#调用。 SDK 简介 本 SDK 适应于于 Windows 平台下的⾝份证识别系统,⽀持 C接⼜开发的 SDK,开发者可在VS2015 下⾯进⾏开发&#xff08;推荐…

爬虫+RPC+js逆向---直接获取加密值

免责声明:本文仅做技术交流与学习,请勿用于其它违法行为;如果造成不便,请及时联系... 目录 爬虫RPCjs逆向---直接获取加密值 target网址: 抓包 下断点 找到加密函数 分析参数 RPC流程 一坨: 二坨: 运行py,拿到加密值 爬虫RPCjs逆向---直接获取加密值 target网址: 优志…

Django+Celery框架自动化定时任务开发

本章介绍使用DjCelery即DjangoCelery框架开发定时任务功能&#xff0c;在Autotestplat平台上实现单一接口自动化测试脚本、业务场景接口自动化测试脚本、App自动化测试脚本、Web自动化测试脚本等任务的定时执行、调度、管理等&#xff0c;从而取代Jenkins上的定时执行脚本和发送…

R语言复现:轨迹增长模型发表二区文章 | 潜变量模型系列(2)

培训通知 Nhanes数据库数据挖掘&#xff0c;快速发表发文的利器&#xff0c;你来试试吧&#xff01;欢迎报名郑老师团队统计课程&#xff0c;4.20直播。 案例分享 2022年9月&#xff0c;中国四川大学学者在《Journal of Psychosomatic Research》&#xff08;二区&#xff0c;I…

南京航空航天大学-考研科目-513测试技术综合 高分整理内容资料-01-单片机原理及应用分层教程-单片机有关常识部分

系列文章目录 高分整理内容资料-01-单片机原理及应用分层教程-单片机有关常识部分 文章目录 系列文章目录前言总结 前言 单片机的基础内容繁杂&#xff0c;有很多同学基础不是很好&#xff0c;对一些细节也没有很好的把握。非常推荐大家去学习一下b站上的哈工大 单片机原理及…

AI大模型引领未来智慧科研暨ChatGPT自然科学高级应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

大数据基础学习

目录 一.什么是大数据二.数据处理技术分类&#xff08;OLAP vs OLTP&#xff09;OLAP&#xff08;Online Analytical Processing&#xff09;OLTP&#xff08;Online Transaction Processing&#xff09;区别联系 三.储存的方式&#xff08;列式 vs 行式&#xff09;行式存储列…