React--Redux

Redux 是一个用于 JavaScript 应用的状态管理库,特别是在 React 应用中非常流行。下面我将详细介绍一个使用 Redux 的简单案例,包括设置 Redux 环境、创建 store、定义 actions 和 reducers,以及如何连接 React 组件。

步骤 1: 安装依赖

首先,确保你已经安装了 Node.js 和 npm。然后,使用以下命令安装 Redux 和 React-Redux:

npm install redux react-redux

步骤 2: 设置 Redux

创建 Action

Actions 是描述要发生什么的普通对象,通常包含一个 type 字段和可能的其他数据字段。

// src/actions/counterActions.jsexport const increment = () => ({type: 'INCREMENT'
});export const decrement = () => ({type: 'DECREMENT'
});export const reset = () => ({type: 'RESET'
});
创建 Reducer 

Reducers 是一个纯函数,接收当前状态和 action,并返回新的状态。

// src/reducers/counterReducer.jsconst initialState = {count: 0
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };case 'RESET':return { ...state, count: 0 };default:return state;}
};export default counterReducer;
创建 Store

Store 是 Redux 的核心,保存应用的状态,并提供 dispatch 方法来发送 actions。

// src/store.jsimport { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';const store = createStore(counterReducer);export default store;

步骤 3: 连接 React 和 Redux

提供 Store

使用 Provider 组件将 Redux store 传递到应用的组件树中。

// src/index.jsimport 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')
);
创建组件

在 React 组件中,使用 connect 函数将 Redux store 的 state 和 dispatch 方法映射到组件的 props 上。

// src/App.jsimport React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actions/counterActions';const App = ({ count, increment, decrement, reset }) => {return (<div><h1>Counter: {count}</h1><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button><button onClick={reset}>Reset</button></div>);
};// mapStateToProps 函数,映射 state 到组件的 props
const mapStateToProps = state => ({count: state.count
});// mapDispatchToProps 函数,映射 dispatch 到组件的 props
const mapDispatchToProps = {increment,decrement,reset
};export default connect(mapStateToProps, mapDispatchToProps)(App);

 关系规则

Redux 核心概念

  1. Store

    • Redux 的核心,保存应用的整个状态树。
    • 唯一的状态源,不能直接修改,需通过 action 分发来改变状态。
  2. Action

    • 描述发生了什么的普通 JavaScript 对象。
    • 必须包含 type 字段,表示 action 的类型。
  3. Reducer

    • 纯函数,接收当前状态和 action,并返回新的状态。
    • 根据 action 的类型决定如何更新状态。
  4. Dispatch

    • Store 的方法,用于发送 action,触发 state 变化。
  5. Connect

    • React-Redux 提供的函数,将 React 组件与 Redux store 连接起来。
    • 将 state 和 dispatch 映射到组件的 props 上。

 

                  +------------+|  Store     |+------+-----+|| dispatch(action)|+------v-----+|  Reducer   |+------+-----+|| new state|+------v-----+|  Component |+------------+

步骤详解

  1. 创建 Action

    • Action 是一个描述要发生什么的对象,有一个必需的 type 字段。
// actions/counterActions.js
export const increment = () => ({type: 'INCREMENT'
});export const decrement = () => ({type: 'DECREMENT'
});export const reset = () => ({type: 'RESET'
});

定义 Reducer: 

  • Reducer 是一个纯函数,接收当前状态和 action,并返回新的状态。
// reducers/counterReducer.js
const initialState = {count: 0
};const counterReducer = (state = initialState, action) => {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };case 'DECREMENT':return { ...state, count: state.count - 1 };case 'RESET':return { ...state, count: 0 };default:return state;}
};export default counterReducer;

创建 Store

  • Store 是应用的状态容器,包含应用的状态和 dispatch 方法
// store.js
import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';const store = createStore(counterReducer);export default store;

提供 Store 给应用

  • 使用 Provider 组件将 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')
);

连接 React 组件与 Redux

  • 使用 connect 函数将 Redux state 和 dispatch 方法映射到组件的 props 上。
// App.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actions/counterActions';const App = ({ count, increment, decrement, reset }) => {return (<div><h1>Counter: {count}</h1><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button><button onClick={reset}>Reset</button></div>);
};const mapStateToProps = state => ({count: state.count
});const mapDispatchToProps = {increment,decrement,reset
};export default connect(mapStateToProps, mapDispatchToProps)(App);

数据流动过程

  1. 用户交互

    • 用户在组件中点击按钮(例如,点击 "Increment" 按钮)。
  2. 派发 Action

    • increment 函数被调用,返回一个 action 对象 { type: 'INCREMENT' },并通过 dispatch 方法派发这个 action。
  3. Reducer 处理 Action

    • Store 收到这个 action,并将其传递给 reducer。
    • Reducer 检查 action 的类型(INCREMENT),并根据逻辑返回新的 state。
  4. 更新 Store

    • Store 根据 reducer 返回的新 state 更新其内部的 state。
  5. 组件重新渲染

    • connect 函数确保组件接收到最新的 state 并重新渲染。

这样,整个数据流从组件到 store 再回到组件,形成一个单向数据流。这种模式确保了数据的可预测性和可维护性。

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

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

相关文章

基于STM32通过云平台实现智慧大棚【手机远程查看温湿度】【报警】

文章目录 一、成果演示二、所用到的模块三、实现的功能四、接线说明五、WIFI模块配置步骤5.1云平台介绍5.2云平台使用5.3使用USB转TTL测试联通云平台 六、STM32代码编写七、手机上查看数据6.1下载软件&#xff08;仅限安卓手机&#xff09;6.2操作 一、成果演示 STM32通过物联网…

String、StringBuffer和StringBuilder

一、String类 1. String类的理解 2. String类结构 1. String类实现了Serializable接口,说明String对象可以串行化,即可以在网络上传输 2. String类实现了Comparable接口,说明String对象可以比较 String底层是一个字符数组,这个数组里存的是字符串的内容 例如:…

005 仿muduo实现高性能服务器组件_通信连接管理

​&#x1f308;个人主页&#xff1a;Fan_558 &#x1f525; 系列专栏&#xff1a;仿muduo &#x1f4d2;代码仓库&#xff1a; 项目代码 &#x1f339;关注我&#x1f4aa;&#x1f3fb;带你学更多知识 文章目录 前言Channel模块设计原因整体设计代码如下 Connection模块设计原…

Florence2:Advancing a unified representation for a variety of vision tasks

Florence-2模型:开启统一视觉基础模型的新篇章_florence -2-CSDN博客文章浏览阅读1.1k次,点赞108次,收藏109次。Florence-2是由微软Azure AI团队开发的一款多功能、统一的视觉模型。它通过统一的提示处理不同的视觉任务,表现出色且优于许多大型模型。Florence-2的设计理念是…

用Postman Flows打造你的专属API:外部公开,轻松上手!

引言 Postman Flows 是一个使用 GUI 进行无代码 API 调用流程创建的服务。这篇文章我尝试使用 Flows 来构建将 Momento Topic 中的数据保存到 TiDB 的保存 API&#xff0c;因此想分享一些使用过程中的技巧等。 实现内容 将从 Momento Topics 配发的 JSON 数据保存到 TiDB 中。…

3086. 拾起 K 个 1 需要的最少行动次数

3086. 拾起 K 个 1 需要的最少行动次数 题目链接&#xff1a;3086. 拾起 K 个 1 需要的最少行动次数 代码如下&#xff1a; //参考链接:https://leetcode.cn/problems/minimum-moves-to-pick-k-ones/solutions/2692009/zhong-wei-shu-tan-xin-by-endlesscheng-h972 class Sol…

CrowdStrike引发全球微软系统大宕机:事故解析及网络安全反思

引言 近日&#xff0c;一次由CrowdStrike推送的更新引发了全球IT系统大规模故障。超过850万台电脑受到影响&#xff0c;涵盖各个行业和领域&#xff0c;引发了广泛关注和讨论。本文将详细解析此次事件的来龙去脉&#xff0c;评估其影响&#xff0c;并探讨网络安全的现状及未来…

C++ 栈( stack )学习

目录 1.栈 2.模拟栈 1.1.入栈( push ) 1.2.出栈( pop ) 1.3.获取栈顶元素( top ) 3.直接使用栈( stack ) 3.1.导入头文件并创建栈 3.2.栈的操作 3.2.1.入栈( push ) 3.2.2.出栈( pop ) 3.2.3.获取栈顶元素( top ) 3.2.4.获取栈中元素个数( size ) 3.2.5.判断栈是否…

代码随想录算法训练营day8 | 344.反转字符串、541.反转字符串 II、卡码网:54.替换数字

文章目录 344.反转字符串思路 541.反转字符串 II思路 卡码网&#xff1a;54.替换数字思路复习&#xff1a;字符串 vs 数组 总结 今天是字符串专题的第一天&#xff0c;主要是一些基础的题目 344.反转字符串 建议&#xff1a; 本题是字符串基础题目&#xff0c;就是考察 revers…

ChatGPT:宽列数据库是什么?

ChatGPT&#xff1a;宽列数据库是什么&#xff1f; 宽列数据库&#xff08;Wide-Column Store&#xff09;是一种 NoSQL 数据库&#xff0c;它的设计灵感来自于 Google 的 Bigtable。宽列数据库适用于处理大规模的分布式数据存储&#xff0c;特别是在需要高性能读写、灵活的数据…

docker挂载部署reids6.2.1

1.拉取镜像 docker pull redis:6.2.12.创建挂在目录&#xff08;根据自己要求修改具体目录&#xff09; mkdir -p /home/admin/redis/{data,conf}3.在/home/admin/redis/conf目录下创建redis.conf文件 cd /home/admin/redis/conf touch redis.conf4.复制下面文本到redis.conf…

深入理解 Laravel 中的会话管理

引言 会话管理是 Web 应用中一个至关重要的功能&#xff0c;它允许应用识别并跟踪用户的会话状态。Laravel 提供了一个强大而灵活的会话管理系统&#xff0c;使得开发者可以轻松实现用户状态的跟踪和管理。本文将详细介绍 Laravel 中的会话管理机制&#xff0c;包括会话的创建…

浅析JWT原理及牛客出现过的相关面试题

原文链接&#xff1a;https://kixuan.github.io/posts/f568/ 对jwt总是一知半解&#xff0c;而且项目打算写个关于JWT登录的点&#xff0c;所以总结关于JWT的知识及网上面试考察过的点 参考资料&#xff1a; Cookie、Session、Token、JWT_通俗地讲就是验证当前用户的身份,证明-…

不断把别人“装”进我们的灵魂口袋

嘿&#xff0c;朋友们&#xff01;今天我们来聊聊一种超酷的能量——本色示人。这不是什么秘密武器&#xff0c;但它比任何超能力都来得实在。 第一部分&#xff1a;本色示人&#xff0c;能量界的“超级赛亚人” 1.1 坦诚的超能力 想象一下&#xff0c;如果你的内心强大到可以…

使用SpringBoot中@Scheduled注解应用场景和示例代码

概述 Scheduled注解可以应用在方法上&#xff0c;用于指定方法的执行时间。它有几种常见的用法&#xff0c;可以设置固定的时间间隔、固定的延迟时间、或者使用Cron表达式来定义更复杂的调度规则。 应用场景 定时任务执行&#xff1a;例如每天凌晨执行数据备份。定时报表生成…

Window部署Ollama+Qwen2.0+Open-WebUI

文章目录 Windows下安装Docker安装Docker检查是否安装成功, 出现版本即为安装成功安装Ollama启动 Ollama 并拉取模型(选做) 修改默认地址和端口(选做) Ollama 进行跨域配置安装open-webui Windows下安装Docker 准备条件 开启Hyper-V&#xff0c;在“启用或关闭Windows功能”里…

Java中的BigDecimal

BigDecimal 是 Java 中用于高精度计算的类&#xff0c;它主要用于处理非常大或非常精确的浮点数&#xff0c;特别是那些需要精确小数点的场景&#xff0c;比如金融计算。由于 float 和 double 类型在进行运算时可能会产生精度丢失的问题&#xff0c;BigDecimal 提供了一种解决方…

C语言 #指针数组 #数组指针 #数组参数、指针参数

文章目录 前言 一、指针数组 1、概念&#xff1a; 2、指针数组有什么用呢&#xff1f; 二、数组指针 1、数组指针的定义 2、数组名与 &数组名 的区别 3、数组指针如何初始化&#xff1f; 4、数组指针的用法 三、根据代码区分 指针数组 和 数组指针 四、数组参数、指针参数 …

软件-vscode-plantUML-drawio

文章目录 vscode基础命令 实操1. vscode实现springboot项目搭建 &#xff08;包括spring data jpa和sqlLite连接&#xff09; PlantUMLDrawio基础实操 vscode 基础 命令 启动mysql命令 docker run --name mysql-container -e MYSQL_ROOT_PASSWORD123456 -p 3306:3306 -d my…

Shell编程之正则表达式与文本三剑客

目录 一、正则表达式 1.引言--什么是正则表达式 1.1正则表达式的功能 2.基础正则表达式&#xff08;BRE&#xff09; 2.1特殊字符 2.2定位符 2.3非打印字符 3.扩展正则表达式(ERE) 4.元字符操作的案列 二、命令小工具 1.cut&#xff1a;列截取工具 2.sort排序 …