笔记二十四、剖析Redux的工作流程

news2024/12/23 18:35:23

24.1 定义

  • 用做于状态管理的第三方 js 库
  • react框架中使用,也可应用于其他的框架

使用场景

  • 组件间需要共享状态和改变另一个组件的状态
  • 在react项目中可以不使用就尽量不用,复杂场景下才使用

24.2 原理图 

24.3 代码

安装

yarn add @reduxjs/toolkit react-redux

 先上个组织架构图

24.3.1 在程序主入口配置store

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import {Provider} from "react-redux";
import store from "./store";

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <Provider store={store}>
            <App/>
        </Provider>
    </React.StrictMode>,
)

24.3.2 新建store

store/index.jsx

// store/index.js
import {configureStore} from "@reduxjs/toolkit";
// 引入 reducer 函数
import counterSlice from "./modules/counterSlice";

// 使用configureStore创建一个redux仓库
// 并自动配置了 Redux DevTools 扩展 ,这样你就可以在开发时调试 store
export default configureStore({
    reducer: {
        // 告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新
        counter: counterSlice,
    },
});

24.3.3 新建某个 reducer

store/modules/counterSlice.js

//modules/counterSlice.js
import {createSlice} from "@reduxjs/toolkit";

// 创建react数据切片 利用createSlice()
export const counterSlice = createSlice({
    // 类似于vuex的命名空间,必须是唯一值
    // 与pinia的defineStore()的第一个参数一个意思,都是唯一值,做区分
    name: "counter",
    // 公共状态
    initialState: {value: 0, list: [1, 1, 1]},
    // 方法
    reducers: {
        // 增加1
        // 方法接收2个参数,第一个参数是变量,第二个参数是载荷(也就是使用方法传入的参数)
        increment: (state) => {
            state.value += 1;
            state.list.push(1);
        },
        // 减少1
        decrement: (state) => {
            state.value -= 1;
            state.list.pop(1);
        }
    },
});

// 每个 case reducer 函数会生成对应的 Action creators
export const {increment, decrement} = counterSlice.actions;

export default counterSlice.reducer;

24.3.4 使用

App.jsx

import React from "react";
import {useSelector, useDispatch} from "react-redux";
import {decrement, increment} from "./store/modules/counterSlice";
import Test from "./components/Test/index.jsx";

export default function Person() {

    // 拿到store里的数据/状态
    const {value, list} = useSelector((state) => state.counter);

    // 通过dispatch调用store里面的方法
    const dispatch = useDispatch();

    return (
        <div>
            <h2>Person -- {value}</h2>
            <h2>list -- {list.length}</h2>
            <button onClick={() => dispatch(increment())}>增加</button>
            <button onClick={() => dispatch(decrement())}>减少</button>
            <hr />
            <Test />
        </div>
    );
}

Test/index.jsx

该组件和 App.jsx 共享 state , App.jsx 调用方法修改数值后,Test 中的数值也跟着发生改变

import React, {Component} from 'react';
import {useSelector, useDispatch} from "react-redux";

const Test = () => {
    // 拿到store里的数据/状态
    const {value, list} = useSelector((state) => state.counter);
    return (
        <div>
            测试组件:{value},{list.length}
        </div>
    );

};
export default Test;

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

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

相关文章

【linux】/etc/security/limits.conf配置文件详解、为什么限制、常见限制查看操作

文章目录 一. limits.conf常见配置项详解二. 文件描述符&#xff08;file descriptor&#xff09;简述三. 为什么限制四. 相关操作1. 展示当前资源限制2. 查看系统当前打开的文件描述符数量3. 查看某个进程打开的文件描述符数量4. 各进程占用的文件描述符 /etc/security/limits…

软著项目推荐 深度学习图像风格迁移

文章目录 0 前言1 VGG网络2 风格迁移3 内容损失4 风格损失5 主代码实现6 迁移模型实现7 效果展示8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习图像风格迁移 - opencv python 该项目较为新颖&#xff0c;适合作为竞赛课题…

JDK21无法导入TimeUnit类

运行环境&#xff1a;windows11、IDEA2023.1.3、JDK21 问题描述&#xff1a;IDEA中无法导入java.util.concurrent.TimeUnit类。 以下截图是问题解决后的截图。有问题的时候未截图&#xff0c;说明一下&#xff0c;有问题的时候TimeUnit类是红色的&#xff0c;无法导入&#x…

ipa应用测试平台怎么开开具发票

控制台-个人中心-发票管理 ●点击申请发票可以开具发票 ●申请发票-填写资料-勾选订单 ●个人发票开具以及公司发票开具 ●提交发票申请 ●等待申请成功开具发票 ●发票开具成功&#xff0c;我们可以开具或者查看发票

什么是死锁?如何产生死锁?死锁的必要条件?怎么解决死锁?

🔒1、什么是死锁 死锁是一个非常让程序猿烦恼的问题,一旦所写的程序有了死锁,那么程序就无法执行下去,会出现严重的 bug,并且死锁非常隐蔽,我们不会轻易发现它,在开发阶段,不经意期间我们就会写出死锁,很难检测出来。 那么什么是死锁呢?竟然让我们如此烦恼。 “死…

C语言:写一个函数,输入一个十六进制数,输出相应的十进制数

分析&#xff1a; 当用户运行该程序时&#xff0c;程序会提示用户输入一个十六进制数。用户需要在命令行中输入一个有效的十六进制数&#xff0c;例如&#xff1a;"1A3F"。 接下来&#xff0c;程序调用了名为 xbed 的函数&#xff0c;并将用户输入的十六进制数作…

TCP_握手+挥手过程状态变化分析

TCP状态解读 握手挥手过程状态变化 同时握手 双发同时发起syn请求&#xff0c;状态变化过程如下&#xff1a; 图片来源&#xff1a;http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-4.htm 同时挥手 4次挥手&#xff0c;可以理解为2…

oops-framework框架 之 创建项目(二)

引擎&#xff1a; CocosCreator 3.8.0 环境&#xff1a; Mac Gitee: oops-game-kit 构建 本篇博客将使用oops-game-kit 构建一个新的开发项目&#xff0c; 关于 oops-framework 框架的了解&#xff0c;可参考上篇博客&#xff1a; oops-framework框架 之 初始了解(一) 大概…

WordPress:解决xmlrpc.php被扫描爆破的风险

使用WordPress的朋友都知道&#xff0c;一些【垃圾渣渣】会利用xmlrpc.php文件来进行攻击&#xff0c;绕过WP后台错误登录次数限制进行爆破。虽然密码复杂的极难爆破&#xff0c;但及其占用服务器资源。 方法一、利用宝塔防火墙&#xff08;收费版&#xff09; 一般可以直接使…

python中jupyter notebook安装教程

一、什么是Jupyter Notebook&#xff1f; Jupyter Notebook是基于网页的用于交互计算的应用程序。其可被应用于全过程计算&#xff1a;开发、文档编写、运行代码和展示结果。 ——Jupyter Notebook官方介绍 https://jupyter-notebook.readthedocs.io/en/stable/notebook.html二…

JMeter怎样测试WebSocket

一、安装WebSocket取样器 1、从JMeter插件管理器官网下载&#xff1a; https://jmeter-plugins.org/ 搜索websocket 1、jetty-http-9.1.2.v20140210.jar 2、jetty-io-9.1.2.v20140210.jar 3、jetty-util-9.1.2.v20140210.jar 4、websocket-api-9.1.1.v20140108.jar 5、w…

太阳能路灯系统在道路照明中的应用

太阳能路灯作为一种极为科学和环保的光源利用形式&#xff0c;一直以来备受关注&#xff0c;但是&#xff0c;目前虽然有很多技术可以证明太阳能路灯的可行性&#xff0c;不过&#xff0c;如何真正的将太阳能路灯应用到道路照明之中&#xff0c;还是需要进行深入分析和探讨的。…

安装两个WIN10/WIN11系统到两个盘中,第二个系统依赖原系统盘引导的问题

前段时间折腾装一个双系统&#xff0c;主要两个方面考虑&#xff1a; 1. 原来的系统又许多软件&#xff0c;想着先保留&#xff1b; 2. 系统想安装到一个固态硬盘中&#xff1b; 在安装的过程中遇到了一些问题&#xff0c;这里记录分享一下。 问题1&#xff0c;运行系统自动安装…

WebUI自动化学习(Selenium+Python+Pytest框架)005

基础知识学习完毕&#xff0c;接下来我们开始学习测试框架啦&#xff01;&#xff01;&#xff01; 首先来回顾一下python自带的Unittest框架&#xff1a; Python基础学习016__UnitTest-CSDN博客文章浏览阅读97次。Testcase:测试用例:这个测试用例是UnitTest的组成部分,不是手…

2021年12月14日 Go生态洞察:Go 1.18 Beta 1 发布与泛型的引入

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

43.0BaseDao抽取dao公共父类

43.1. 回顾 1. 把数据库表中查询的结果封装到一个实体类中。 命名规则:类名和表名一致 类中属性和表的字段对应。 表中的一条记录对应实体的一个对象 多条记录→集合 43.2. 正文 目录 43.1. 回顾 43.2. 正文 43.3. 抽取dao公共父类。 43.4. 引入数据源 43.3. 抽取dao公共…

【算法】算法题-20231128

这里写目录标题 一、55. 跳跃游戏二、274. H 指数三、125. 验证回文串 一、55. 跳跃游戏 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&am…

力扣题:字符的统计-11.30

力扣题-11.30 [力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 力扣题1&#xff1a;49. 字母异位词分组 解题思想&#xff1a;将单词进行排序之后通过哈希表进行返回 class Solution(object):def groupAnagrams(self, strs):""":type strs: List[str]:…

【嵌入式Linux程序开发综合实验】-1(附流程图) | ARM开发板 | 测试“Hello World” | Makefile文件 | 实现加法相加

任务&#xff1a;编写在标准输出终端输出“Hello World&#xff01;”的C语言代码以及输入指定数字相加结果、Makefile&#xff0c;并分别编译出在PC与ARM上运行的可执行程序文件。 设备以及工具 硬件&#xff1a;Linux开发板、PC机、串口连接线 图1 Linux开发板以及串口接线 …

计算机网络(超详解!) 第二节 物理层(下)

1.信道复用技术 复用 (multiplexing) 是通信技术中的基本概念。 它允许用户使用一个共享信道进行通信&#xff0c;降低成本&#xff0c;提高利用率。 1.频分复用 FDM(Frequency Division Multiplexing) 将整个带宽分为多份&#xff0c;用户在分配到一定的频带后&#xff0c;…