学习Redux：React状态管理的简明指南

学习Redux：React状态管理的简明指南

一、Redux介绍

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行
作用：通过集中管理的方式管理应用的状态

为什么要使用Redux？

  1. 独立于组件，无视组件之间的层级关系，简化通信问题
  2. 单项数据流清晰，易于定位bug
  3. 调试工具配套良好，方便调试

二、Redux快速体验

在这一部分，我们将通过两个简单的步骤来快速体验Redux的基本概念。

1. 实现计数器

首先，让我们创建一个简单的计数器应用程序，以便更好地理解Redux的基本概念。我们将展示如何设置Redux，创建一个简单的store，并通过actions和reducers实现一个计数器。

// 定义action类型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';// 定义action创建函数
const increment = () => ({type: INCREMENT
});const decrement = () => ({type: DECREMENT
});// 定义reducer
const counterReducer = (state = 0, action) => {switch (action.type) {case INCREMENT:return state + 1;case DECREMENT:return state - 1;default:return state;}
};// 创建store
const { createStore } = Redux;
const store = createStore(counterReducer);// 订阅state变化
store.subscribe(() => {console.log('Current state:', store.getState());
});// 分发action
store.dispatch(increment()); // 输出：Current state: 1
store.dispatch(decrement()); // 输出：Current state: 0

通过上述代码，我们成功创建了一个Redux store、定义了action和reducer，并通过dispatch触发了state的变化。

2. Redux数据流架构

Redux的数据流架构是其核心概念之一。以下是一个简单的表格，描述了Redux中的state、action和reducer三个概念：

概念描述
State应用程序的当前状态，存储在Redux的store中。
Action对状态进行描述的对象，包含type和payload等属性。
Reducer根据收到的action来更新state的纯函数。

理解Redux的数据流架构有助于我们更好地组织和管理应用的状态，为后续更复杂的应用场景打下基础。在接下来的部分，我们将继续深入学习Redux与React的结合，以更好地应用这一架构。

三、Redux与React - 环境准备

Redux虽然是一个框架无关可以独立运行的插件，但是社区通常还是把它与React绑定在一起使用，以一个计数器案例体验一下Redux + React 的基础使用

1. 配套工具

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

  1. Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式

  2. react-redux - 用来 链接 Redux 和 React组件 的中间件

2. 配置基础环境

  1. 使用 CRA 快速创建 React 项目
npx create-react-app react-redux
  1. 安装配套工具
npm i @reduxjs/toolkit  react-redux
  1. 启动项目
npm run start

3. store目录结构设计

image-20240118144553701

  1. 通常集中状态管理的部分都会单独创建一个单独的 store 目录

  2. 应用通常会有很多个子store模块，所以创建一个 modules 目录，在内部编写业务分类的子store

  3. store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store

四、Redux与React - 实现Counter

在这一部分，我们将详细介绍如何在React应用中实现一个基本的计数器功能，通过Redux来管理状态。

1. 整体路径熟悉

首先，让我们熟悉整体的路径。在React中，我们将使用Redux来管理应用的状态，而计数器将作为一个简单的示例，帮助我们理解Redux与React的集成。

2. 使用React Toolkit 创建 counterStore

为了简化Redux的使用，我们将使用Redux Toolkit来创建我们的store。Redux Toolkit提供了一组工具，使Redux的使用更加简单和便捷。

// 安装Redux Toolkit
npm install @reduxjs/toolkit

然后，创建我们的counterStore：

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';export const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: (state) => state + 1,decrement: (state) => state - 1,},
});export const { increment, decrement } = counterSlice.actions;
export const selectCount = (state) => state.counter;// store.js
import { configureStore } from '@reduxjs/toolkit';
import { counterSlice } from './counterSlice';export const store = configureStore({reducer: {counter: counterSlice.reducer,},
});

3. 为React注入store

在React应用中，我们需要在顶层组件处注入Redux的store。这通常在应用的入口文件中完成。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
);

4. React组件使用store中的数据

在React组件中，我们可以使用useSelector来获取store中的数据，并展示在UI上。

// CounterComponent.js
import React from 'react';
import { useSelector } from 'react-redux';
import { selectCount } from './counterSlice';const CounterComponent = () => {const count = useSelector(selectCount);return (<div><p>Count: {count}</p></div>);
};export default CounterComponent;

5. React组件修改store中的数据

为了修改store中的数据，我们可以使用useDispatch来派发actions。

// CounterControls.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';const CounterControls = () => {const dispatch = useDispatch();return (<div><button onClick={() => dispatch(increment())}>Increment</button><button onClick={() => dispatch(decrement())}>Decrement</button></div>);
};export default CounterControls;

通过上述步骤，我们成功地在React应用中实现了一个基本的计数器，并通过Redux来管理其状态。在接下来的部分，我们将进一步探讨Redux与React的其他集成方式以及更复杂的应用场景。

五、Redux与React - 提交Action传参

在这一部分，我们将学习如何在React应用中提交带有参数的Redux Action，以便更灵活地处理不同的情境。

1. 提交带有参数的Action

Redux Actions可以携带参数，允许我们在不同的场景下发送不同的信息。以下是一个简单的例子，展示如何提交带有参数的Action：

// actions.js
export const setCounter = (value) => ({type: 'SET_COUNTER',payload: value,
});

在React组件中，我们可以这样使用：

// CounterComponent.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { setCounter } from './actions';const CounterComponent = () => {const dispatch = useDispatch();const handleSetCounter = (value) => {dispatch(setCounter(value));};return (<div><button onClick={() => handleSetCounter(10)}>Set Counter to 10</button><button onClick={() => handleSetCounter(20)}>Set Counter to 20</button></div>);
};export default CounterComponent;

2. Redux与React - 异步Action处理

有时，我们需要处理异步操作，例如从服务器获取数据。Redux中的异步操作通常通过中间件（如Redux Thunk）来处理。以下是一个简单的例子：

// actions.js
export const fetchData = () => {return async (dispatch) => {dispatch({ type: 'FETCH_DATA_REQUEST' });try {const response = await fetch('https://api.example.com/data');const data = await response.json();dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });} catch (error) {dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });}};
};

在React组件中，我们可以这样使用：

// DataFetchingComponent.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';const DataFetchingComponent = () => {const dispatch = useDispatch();const data = useSelector((state) => state.data);useEffect(() => {dispatch(fetchData());}, [dispatch]);return (<div>{data.loading && <p>Loading...</p>}{data.error && <p>Error: {data.error}</p>}{data.data && <p>Data: {data.data}</p>}</div>);
};export default DataFetchingComponent;

通过上述步骤，我们可以在React应用中更灵活地提交带有参数的Redux Actions，并处理异步操作。在接下来的部分，我们将深入研究Redux DevTools，以便更好地调试和监控我们的Redux应用。

六、Redux调试 - devtools

在这一部分，我们将学习如何使用Redux DevTools来调试和监控Redux应用的状态变化。

image.png

1. 安装Redux DevTools Extension

首先，确保你的浏览器中安装了Redux DevTools Extension。这个浏览器扩展提供了一个强大的工具集，用于监视和调试Redux应用程序的状态变化。

  • Redux DevTools Extension - Chrome
  • Redux DevTools Extension - Firefox

2. 集成DevTools到Redux中

在Redux的store配置中，我们可以使用composeWithDevTools函数来集成Redux DevTools。

// store.js
import { configureStore } from '@reduxjs/toolkit';
import { counterSlice } from './counterSlice';
import { composeWithDevTools } from 'redux-devtools-extension';export const store = configureStore({reducer: {counter: counterSlice.reducer,},
}, composeWithDevTools());

3. 查看和调试状态变化

安装并配置好Redux DevTools后，你可以打开浏览器的开发者工具，切换到Redux DevTools选项卡。这里你将能够：

  • 查看每个action的触发历史。
  • 回溯到之前的状态。
  • 监控状态变化。
  • 导出和导入状态快照。

通过这些功能，你可以更轻松地理解应用的状态变化，发现潜在的问题，并更高效地调试Redux应用。

通过以上步骤，你已成功集成并使用Redux DevTools来调试和监控你的Redux应用。在接下来的部分，我们将总结并展望未来学习的方向。

小结

本博客深入介绍了在React中使用Redux的基础知识：

  1. Redux介绍： 学习了Redux的核心概念，包括State、Action、Reducer和Store，构建了单向、可预测的数据流架构。

  2. Redux快速体验： 通过实现计数器应用，快速掌握了Redux基本用法，包括定义Action、创建Reducer和触发State变化。

  3. Redux与React - 实现Counter： 使用React Toolkit简化Redux集成，展示了在React组件中使用useSelector和useDispatch管理状态。

  4. Redux与React - 提交Action传参： 学会了提交带参数的Redux Actions，提供更灵活的状态处理。同时处理了异步操作。

  5. Redux调试 - DevTools： 集成Redux DevTools，提高调试效率，能够轻松监控和分析状态变化。

通过这些步骤，你现在具备了在React中使用Redux进行状态管理的基础知识。继续探索和实践，将更熟练地应用Redux来应对React应用的复杂状态。如有疑问，随时向我提问！

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

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

相关文章

linux基础学习（4）：rpm包与相关命令

linux基础学习（4）：rpm包与相关命令

1.linux内的软件包分类 linux只有2种软件包&#xff1a;源码包 与 二进制包 &#xff08;1&#xff09;源码包 源码包就是开源的源程序包&#xff0c;使用者可以直接看到其程序&#xff0c;也可以进行修改 &#xff08;2&#xff09;二进制包 由于源码包安装难度大&#x…
阅读更多...
Linux常用命令2

Linux常用命令2

部署方式 单机模式哨兵模式集群模式 单机模式&#xff1a;一个中心、一个服务节点 哨兵模式&#xff1a;一个中心、一个主节点、一个从节点&#xff0c;哨兵默认中心端开启 集群模式&#xff1a;三主三从&#xff0c;三个分片 nohup ./StartServer.sh & //后台启动 ca…
阅读更多...
【k8s】Kubernetes技术和相关命令简介

【k8s】Kubernetes技术和相关命令简介

一、 Kubernetes简介 Kubernetes是Google开源的一个容器编排引擎&#xff0c;它支持自动化部署、大规模可伸缩、应用容器化管理。在生产环境中部署一个应用程序时&#xff0c;通常要部署该应用的多个实例以便对应用请求进行负载均衡。kubernetes&#xff0c;简称K8s&#xff0…
阅读更多...
软考笔记--操作系统-内存管理

软考笔记--操作系统-内存管理

任何程序和数据都必须占用内存空间后才能执行&#xff0c;因此&#xff0c;内存管理的好坏直接影响整个操作系统的性能。操作系统的任务之一是尽可能地方便用户使用和提高内存的利用率。同时&#xff0c;内存管理也是多道程序设计系统的关键支撑。内存管理的功能主要包括以下几…
阅读更多...
C# 读取ini文件示例

C# 读取ini文件示例

一般使用一个相关win32 api的封装类&#xff1b;我用的如下&#xff1b; using System; using System.Runtime.InteropServices; using System.Text;namespace DotNet.Utilities {/// <summary>/// INI文件读写类。/// </summary>public class INIFile{public str…
阅读更多...
【总结】Linux命令中文帮助手册

【总结】Linux命令中文帮助手册

1. 为什么要总结Linux命令中文帮助手册 Linux 官方并不提供中文的 help、man 帮助手册。网络上已有的前人翻译过的中文手册版本比较老&#xff0c;且翻译存在误差。从记忆角度来看&#xff0c;Linux 很多命令都不一定记得住详细的用法&#xff0c;易遗忘&#xff0c;缺少经验总…
阅读更多...
Baumer工业相机堡盟工业相机如何使用OpenCV实现相机图像的显示（C#）

Baumer工业相机堡盟工业相机如何使用OpenCV实现相机图像的显示（C#）

Baumer工业相机堡盟工业相机如何使用OpenCV实现相机图像的显示&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的图像转换为OpenCV的Mat图像的技术背景在NEOAPI SDK里使用OpenCV实现相机图像的显示联合OpenCV实现相机图像的显示测试演示图 工业相机通过使用OpenCV实现…
阅读更多...
Databend x HuggingFace，海量数据，随心分析

Databend x HuggingFace，海量数据，随心分析

作者&#xff1a;尚卓燃&#xff08;PsiACE&#xff09; 澳门科技大学在读硕士&#xff0c;Databend 研发工程师实习生 Apache OpenDAL(Incubating) Committer https://github.com/PsiACE HuggingFace 是目前全球最流行的 AI 社区&#xff0c;推动数据科学家和企业在模型、数据…
阅读更多...
Numpy的学习 第一课 了解以及使用

Numpy的学习 第一课 了解以及使用

1.输入模式 1.编辑模式 绿色2.命令模式 蓝色 2.运行 直接输入jupyter notebook 3.文档注释 查看函数帮助文档命令 help(函数) 单问号与多问号 单问号显示文档 多问号显示文档代码 3.shifttab 显示参数 4.运行外部文件 %run 路径,可绝对可相对 这里运行了就相当于方法了,或者…
阅读更多...
VRPSolverEasy：支持VRP问题快速建模的精确算法Python包

VRPSolverEasy：支持VRP问题快速建模的精确算法Python包

文章目录 前言一步步安装免费版主要模块介绍1. depot point2. customer point3. links4. vehicle type VRPTW 算例数据说明模型建立输出求解状态及结果 前言 VRPSolverEasy 是用于车辆路径问题&#xff08;VRP&#xff09;的最先进的分支切割和定价算法求解器1&#xff0c;它的…
阅读更多...
某国产沙盒游戏的启动器逆向

某国产沙盒游戏的启动器逆向

游戏近期改变了登录方式&#xff0c;于是把之前的研究成果分享一下研究仅供学习交流&#xff0c;如有侵权请联系删除 抓包 启动启动器&#xff0c;输入账号密码&#xff0c;点击登录&#xff0c;抓包得到一些信息 接口 1 https://wskacchm.mini1.cn:14100/login/auth_secur…
阅读更多...
DataFrame的基本使用--学习笔记

DataFrame的基本使用--学习笔记

1&#xff0c;DataFrame的基本使用 DSL方法–DataFrame方法 其中包括的方法有&#xff1a;select(),selectExpr(),groupby()/groupBy() where ,orderBy(),sort(),limit(),withColumn(), from pyspark.sql import SparkSession#创建ss对象ss SparkSession.builder.getOrCreat…
阅读更多...
命令行参数环境变量和进程空间地址

命令行参数环境变量和进程空间地址

文章目录 命令行参数环境变量进程地址空间 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站。 命令行参数 什么是命令行参数&#xff1f; 我…
阅读更多...
【第二十二节】变量与运算符-位运算符

【第二十二节】变量与运算符-位运算符

运算符运算<<左移>>右移>>>无符号右移&与运算|或运算^异或运算~取反运算 位运算符详细信息 <<空位补0&#xff0c;被遗弃的高位丢弃&#xff0c;空缺位补0>>被移位的二进制最高位为0&#xff0c;右移后&#xff0c;空缺位补0&#xff0…
阅读更多...
Fine-tuning：个性化AI的妙术

Fine-tuning：个性化AI的妙术

在本篇文章中，我们将深入探讨Fine-tuning的概念、原理以及如何在实际项目中运用它，以此为初学者提供一份入门级的指南。 一、什么是大模型 ChatGPT大模型今年可谓是大火，在正式介绍大模型微调技术之前，为了方便大家理解，我们先对大模型做一个直观的抽象。 本质上，现在…
阅读更多...
存储任意类型

存储任意类型

code /* * c17 std::any */#include <cstdint> #include <cstring> #include <cstdlib> #include <iostream> #include <thread> #include <chrono>namespace lxz {// T不为指针时 template<typename T> struct Data {Data(): data…
阅读更多...
运用分布式锁 redisson

运用分布式锁 redisson

导入依赖 根据springboot版本不同自行选择版本 <dependency> <groupId>org.redisson</groupId> <artifactId>redisson-spring-boot-starter</artifactId> <version>3.15.3</version> </dependency> 创建客户端 Beanpublic R…
阅读更多...
面试的忌讳，你中了几枪？

面试的忌讳，你中了几枪？

面试是职场旅程中的一个重要环节&#xff0c;它不仅是求职者展示自己的一个舞台&#xff0c;也是企业寻找合适人才的一个过程。在这个过程中&#xff0c;有几个常见的误区需要特别注意。 夜郎自大 很多仗着自己有几年的工作经验&#xff0c;总觉得自己技术牛逼&#xff0c;面…
阅读更多...
QT第六天

QT第六天

要求&#xff1a;使用QT绘图&#xff0c;完成仪表盘绘制&#xff0c;如下图。 素材 运行效果&#xff1a; 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPainter> #include <QPen>QT_BEGIN_NAMESPACE name…
阅读更多...
网络端口映射和端口转发的区别和联系

网络端口映射和端口转发的区别和联系

目 录 一、端口映射技术 1.1 原理 1.2 应用场景 1、远程访问 2、游戏主机 3、文件共享 4、监控视频共享 二、端口转发技术 2.1 原理 2.2 应用场景 1、网络负载均衡 2、网络安全 3、网络代理 三、端口映射和转发的实现方法 3.1 路由器配置 3.2 网络防火墙 …
阅读更多...
最新文章

Copyright @ 2022~2023