【react】Redux基础用法

1. Redux基础用法

Redux 是一个用于 JavaScript 应用的状态管理库,它不依赖于任何 UI库,但常用于与 React 框架配合使用。它提供了一种集中式的状态管理方式,将应用的所有状态保存在一个单一的全局 Store(存储)中,使得状态的变化和共享变得更加可控和可预测。

Redux 的核心概念:

  • Store
    Redux 的 Store 是一个对象,存储了应用的全部状态。应用中只有一个 Store,作为单一数据源。任何组件需要访问状态时都会从这个 Store 中获取数据。

  • Action
    Action 是一个简单的 JavaScript 对象,用**来描述要执行的状态变化。**它通常包含两个部分:type(字符串,描述 Action 的类型)和 payload(可选,用来传递需要修改的数据信息)。Action 是 Redux 中唯一触发状态更新的方式。

  • Reducer
    Reducer 是一个纯函数,定义了应用在接收到不同 Action 时如何更新状态。它接收当前的状态和 Action,返回一个新的状态对象。

  • Dispatch
    Dispatch 是 Redux 中触发 Action 的方法。调用 store.dispatch(action) 可以将 Action 发送到 Store,从而触发 Reducer 更新状态。

  • Selectors
    Selectors 是从 Store 中获取特定状态的函数,主要用于简化和集中获取逻辑,避免直接访问 Store 造成的代码冗余。

  • Middleware
    Redux 中间件是在 dispatch 和 reducer 之间的一个逻辑层,可以用于处理异步操作(如 redux-thunk)或记录状态变化(如 redux-logger)。中间件增强了 Redux,使其能够处理复杂的逻辑和副作用。

简单计数器案例:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/redux/4.2.0/redux.min.js"></script><body><button id="increment">+</button><span id="count">0</span><button id="decrement">-</button>
</body><script>// 1.定义reducer函数// 作用:根据不同的action对象,返回不同的新的state// state:管理的数据初始状态// action:对象 type 标记当前想要做什么样的修改function reducer(state = { count: 0 }, action) {// 数据不可变:基于原始状态生成一个新的状态if (action.type === 'INCREMENT') {return { count: state.count + 1 }}if (action.type === 'DECREMENT') {return { count: state.count - 1 }}return state}// 2. 使用reducer函数创建store对象const store = Redux.createStore(reducer)// 3. 通过store对象的dispatch,修改store中的数据const inBtn = document.getElementById('increment')const deBtn = document.getElementById('decrement')inBtn.addEventListener('click', () => {store.dispatch({ type: 'INCREMENT' })})deBtn.addEventListener('click', () => {store.dispatch({ type: 'DECREMENT' })})// 4. 监听store中数据的变化//每次state发生变化的时候自动执行store.subscribe(() => {console.log('store数据变化了', store.getState())document.getElementById('count').innerText = store.getState().count})
</script>
</html>

2. React中使用Redux

在React中使用redux,官方要求安装俩个其他插件-ReduxToolkitreact-redux

  1. Redux Toolkit(RTK): 官方推荐编写Redux逻辑的方式,是一套工具的集合,简化书写方式
  2. react-redux:用来 链接 Redux和 React组件的中间件
npm install @reduxjs/toolkit react-redux

目录结构:新建store文件夹,将子模块放在modules目录下,index.js为store入口文件。

创建 slice 需要一个字符串名称来标识 slice,一个初始 state 值,以及一个或多个 reducer 函数来定义如何更新 state。创建 slice 后,我们可以导出生成的 Redux action creators 和整个 slice 的 reducer 函数。

/store/modules/counterStore.js

import {createSlice} from '@reduxjs/toolkit'const counterSlice = createSlice({// 标识 slice的字符串名称name:'counter',// 初始化stateinitialState:{count:0},// 修改state的方法(同步方法reducers:{increment(state,action){// 修改时的传参会放在ction.payload属性上state.count += action.payload},decrement(state,action){state.count -= action.payload}}
})// 从 counterSlice.actions中解构
export  const {increment,decrement} = counterSlice.actions
export default counterSlice.reducer

接下来,我们需要从 counter slice 中导入 reducer 函数,并将其添加到我们的 store 中。通过在 reducer 参数中定义一个字段,我们告诉 store 使用这个 slice reducer 函数来处理对该状态的所有更新。

/store/index.js

import { configureStore } from "@reduxjs/toolkit";// 导入子模块reducer
import counterReducer from "./modules/counterStore";
// 通过configureStore来创建一个store
const store =configureStore({reducer: {counter: counterReducer,},
});
export default store

提供store
导入我们刚刚创建的 Redux store,在你的 <App> 周围放一个 <Provider>,然后将 store 作为 prop 传递

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./store";// 将App组件渲染到id为root的DOM元素中
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

读取store中的数据: 使用useSelector函数

修改store中的数据: 使用useDispatch函数,并根据需要 dispatch action

import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./store/modules/counterStore";
function App() {const { count } = useSelector((state) => state.counter);const dispatch = useDispatch();return (<div><button onClick={() => dispatch(decrement(1))}>-</button>{count}<button onClick={() => dispatch(increment(1))}>+</button></div>);
}export default App;

异步请求操作:

  1. 创建store的写法保持不变,配置好同步修改状态的方法
  2. 单独封装一个函数,在函数内部return一个新函数,在新函数中
    2.1 封装异步请求获取数据
    2.2 调用同步actionCreater传入异步数据生成一个action对象,并使用dispatch提交

/store/modules/sentenceStore.js

import { createSlice } from "@reduxjs/toolkit";
// 先安装npm i axios
import axios from "axios";const sentenceSlice = createSlice({name: "sentence",initialState: {sentence: {},},reducers: {setSentence(state, action) {state.sentence = action.payload;},},
});
const { setSentence } = sentenceSlice.actions;
// 获取异步请求数据
const getSentence = () => {return async (dispatch) => {const { data } = await axios.get("https://api.xygeng.cn/one");dispatch(setSentence(data.data));};
};
export { getSentence };    
export default sentenceSlice.reducer;

/store/index.js

import { configureStore } from "@reduxjs/toolkit";// 导入子模块reducer
import counterReducer from "./modules/counterStore";
import sentenceReducer from "./modules/sentenceStore";const store = configureStore({reducer: {counter: counterReducer,sentence: sentenceReducer,},
});
export default store;

3.组件中dispatch的写法保持不变

import { useDispatch, useSelector } from "react-redux";
import { increment, decrement } from "./store/modules/counterStore";
import { getSentence } from "./store/modules/sentenceStore";
import { useEffect } from "react";
function App() {const { count } = useSelector((state) => state.counter);const { sentence } = useSelector((state) => state.sentence);// 通过dispatch触发action,来更新state状态const dispatch = useDispatch();// 使用useEffect触发异步请求useEffect(() => {dispatch(getSentence());}, [dispatch]);return (<div><button onClick={() => dispatch(decrement(1))}>-</button>{count}<button onClick={() => dispatch(increment(1))}>+</button><div>{" "}{sentence.content}--{sentence.name}</div></div>);
}export default App;

👻Redux 官网教程

3. Redux调试工具

google商城里搜索:
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

DevCheck Pro手机硬件检测工具v5.33

前言 DevCheck Pro是一款手机硬件和操作系统信息检测查看工具&#xff0c;该软件的功能非常强大&#xff0c;为用户提供了系统、硬件、应用程序、相机、网络、电池等一系列信息查看功能 安装环境 [名称]&#xff1a;DevCheckPro [版本]&#xff1a;5.33 [大小]&a…

Docker的轻量级可视化工具Portainer

docker目录 1 Portainer官方链接2 是什么&#xff1f;3 下载安装4 跑通一次5 后记 1 Portainer官方链接 这里给出portainer的官方链接&#xff1a;https://www.portainer.io/ portainer安装的官方链接&#xff1a;https://docs.portainer.io/start/install-ce/server/docker/l…

IoTDB 与 HBase 对比详解:架构、功能与性能

五大方向&#xff0c;洞悉 IoTDB 与 HBase 的详尽对比&#xff01; 在物联网&#xff08;IoT&#xff09;领域&#xff0c;数据的采集、存储和分析是确保系统高效运行和决策准确的重要环节。随着物联网设备数量的增加和数据量的爆炸式增长&#xff0c;开发者和决策者们需要选择…

【c++丨STL】vector模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C、STL 目录 前言 一、vector底层刨析 二、模拟实现 1. 属性、迭代器以及函数声明 2. 功能实现 交换两个容器的内容 构造函数 拷贝构造 赋值重载 析构…

C++中类的默认成员函数

默认成员函数 1.构造函数2.析构函数3.拷贝构造函数4.赋值运算符重载4.1运算符重载4.2赋值运算符重载 #mermaid-svg-oipiwg9stvONvYK0 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-oipiwg9stvONvYK0 .error-icon{f…

数据编排与ETL有什么关系?

数据编排作为近期比较有热度的一个话题&#xff0c;讨论度比较高&#xff0c;同时数据编排的出现也暗示着数字化进程的自动化发展。在谈及数据编排时&#xff0c;通常也会谈到ETL&#xff0c;这两个东西有相似点也有不同点。 数据编排和ETL&#xff08;提取、转换、加载&#x…

【SpringCloud】SpringBoot集成Swagger 常用Swagger注解

概述&#xff1a;SpringBoot集成Swagger 常用Swagger注解 导语 相信无论是前端还是后端开发&#xff0c;都或多或少地被接口文档折磨过。前端经常抱怨后端给的接口文档与实际情况不一致。后端又觉得编写及维护接口文档会耗费不少精力&#xff0c;经常来不及更新。其实无论是前…

革命性AI搜索引擎!ChatGPT最新功能发布,无广告更智能!

文章目录 零、前言一、ChatGPT最新AI搜索引擎功能操作指导实战1:搜索新闻实战2:搜索天气实战3:搜索体育消息 二、感受 零、前言 大人&#xff0c;时代变了。 最强 AI 助力下的无广告搜索引擎终于问世。我们期待已久的这一刻终于到来了&#xff0c;从今天起&#xff0c;ChatGPT…

基于 CMSIS-PACK 移植Bootloader

基于 CMSIS-PACK 移植 1.准备工作 准备一份基础的裸机源码 (可通过 STM32CubeMx 可视化软件创建也可按照工程项目所需文档手动创建) 工程&#xff0c;如一份 stm32 包含一个支持 printf 的串口初始化代码。 2.安装Pack包 在 MDK 中部署 **MicroBoot **的第一步是获取对应的…

苍穹外卖day09超出配送范围前端不提示问题

同学们在写苍穹外卖项目day09时调用了百度地图api来判断用户地址是否超出配送范围&#xff0c; 但是在黑马官方的课程或资料中&#xff0c;出现这样的问题时只会向用户端的控制台报错并不会提醒用户 如下图&#xff1a; 解决方法&#xff1a; 其实解决方法很简单只需要找到向…

嵌入式linux中PWM控制与实现

大家好,今天主要给大家分享一下,如何使用linux系统里面的PWM的功能,可以控制对应电机的转速。 第一:PWM驱动基本简介 PWM就是脉冲宽度调制。 PWM信号有两个关键术语:频率和占空比,频率指的是开关的速度。占空比就是一个周期内高电平和低电平时间的比例,一个周期内高电…

CUDA系统学习之一软件堆栈架构

一、CPU与GPU体系架构 计算单元分布 CPU: 少量强大的ALU(算术逻辑单元)&#xff0c;通常4-8个核心GPU: 大量小型ALU&#xff0c;成百上千个计算核心特点&#xff1a;GPU更适合并行计算&#xff0c;可以同时处理大量数据控制单元(Control) CPU: 较大的控制单元&#xff0c;复杂的…

「QT」几何数据类 之 QPoint 整型点类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…

0x00基础算法 -- 0x01 位运算

资料来源&#xff1a;算法竞赛进阶指南活动 - AcWing 1、进制表示 二进制表示&#xff1a;m位二进制中&#xff0c;通常称最低位为第0位&#xff0c;从右到左以此类推&#xff0c;最高位为第m-1位。 常用十六进制表示的数字&#xff1a; 32位补码int&#xff08;十进制&#xf…

H5移动端预览PDF方法

新建页面 新建一个页面以便去预览对应的pdf 新建完后在 pages.json 文件内去新增对应路由 页面内容 <template><view class"page"><view class"pdf"><view id"demo"></view></view><view class"b…

嵌入式开发之线程

进程 vs 线程 进程在切换时系统开销大很多操作系统引入了轻量级进程LWP同一进程中的线程共享相同地址空间Linux不区分进程、线程(都会创建:task_strcut)线程特点: 通常线程指的是共享相同的地址空间的多个任务,使用多线程的好处 大大提高了任务切换的效率避免了额外的TLB…

【SQL实验】更新操作

完整代码在文章末尾【代码是自己的解答&#xff0c;并非标准答案&#xff0c;也有可能写错&#xff0c;文中可能会有不准确或待完善之处&#xff0c;恳请各位读者不吝批评指正&#xff0c;共同促进学习交流】 将素材“图书管理”文件下载到本地&#xff0c;并将其还原到SQL SER…

Hadoop(HDFS)

Hadoop是一个开源的分布式系统架构&#xff0c;旨在解决海量数据的存储和计算问题&#xff0c;Hadoop的核心组件包括Hadoop分布式文件系统&#xff08;HDFS&#xff09;、MapReduce编程模型和YARN资源管理器,最近需求需要用到HDFS和YARN。 文章目录 HDFS优缺点HDFS的读写原理 常…

Spire.PDF for .NET【页面设置】演示:获取 PDF 文件中的页数

计算 PDF 文件中的页数对于各种目的都至关重要&#xff0c;例如确定文档长度、组织内容和评估打印要求。除了使用 PDF 查看器了解页数信息外&#xff0c;您还可以通过编程自动执行该任务。在本文中&#xff0c;您将学习如何使用C#通过Spire.PDF for .NET获取 PDF 文件中的页数。…

stm32不小心把SWD和JTAG都给关了,程序下载不进去,怎么办?

因为想用STM32F103的PA15引脚&#xff0c;调试程序的时候不小心把SWD和JTAD接口都给关了&#xff0c;先看下罪魁祸首 GPIO_PinRemapConfig(GPIO_Remap_SWJ_JTAGDisable,ENABLE);//关掉JTAG&#xff0c;不关SWGPIO_PinRemapConfig(GPIO_Remap_SWJ_Disable, ENABLE);//关掉SW&am…