react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等

react之react-redux的介绍、基本使用、获取状态、分发动作、数据流、reducer的分离与合并等

  • 一、react-redux介绍
  • 二、React-Redux-基本使用
  • 三、获取状态useSelector
  • 四、分发动作useDispatch
  • 五、 Redux 数据流
  • 六、代码结构
  • 七、ActionType的使用
  • 八、Reducer的分离与合并
  • 九、购物挣钱案例

一、react-redux介绍

  • 官网地址
  • React 和 Redux 是两个独立的库,两者之间职责独立。因此,为了实现在 React 中使用 Redux 进行状态管理 ,就需要一种机制,将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了
  • 作用:为 React 接入 Redux,实现在 React 中使用 Redux 进行状态管理。
  • react-redux 库是 Redux 官方提供的 React 绑定库。

在这里插入图片描述

二、React-Redux-基本使用

  • react-redux 的使用分为两大步:1 全局配置(只需要配置一次) 2 组件接入(获取状态或修改状态)
  • 全局配置
    • 1.安装 react-redux:npm i react-redux
    • 2.从 react-redux 中导入 Provider 组件
    • 3.导入创建好的 redux 仓库
    • 4.使用 Provider 包裹整个应用
    • 5.将导入的 store 设置为 Provider 的 store 属性值

index.js 核心代码

// 导入 Provider 组件
import { Provider } from 'react-redux'
// 导入创建好的 store
import store from './store'ReactDOM.render(<Provider store={store}><App /></Provider>,document.querySelector('#root')
)

三、获取状态useSelector

  • useSelector:获取 Redux 提供的状态数据

  • 参数:selector 函数,用于从 Redux 状态中筛选出需要的状态数据并返回

  • 返回值:筛选出的状态

    import { useSelector } from 'react-redux'// 计数器案例中,Redux 中的状态是数值,所以,可以直接返回 state 本身const count = useSelector(state => state)// 比如,Redux 中的状态是个对象,就可以:const list = useSelector(state => state.list)

App.js中核心代码

import { useSelector } from 'react-redux'const App = () => {const count = useSelector(state => state)return (<div><h1>计数器:{count}</h1><button>数值增加</button><button>数值减少</button></div>)
}

四、分发动作useDispatch

  • useDispatch:拿到 dispatch 函数,分发 action,修改 redux 中的状态数据
  • 语法
import { useDispatch } from 'react-redux'// 调用 useDispatch hook,拿到 dispatch 函数
const dispatch = useDispatch()// 调用 dispatch 传入 action,来分发动作
dispatch( action )

App.js 中核心代码

import { useDispatch } from 'react-redux'const App = () => {const dispatch = useDispatch()return (<div><h1>计数器:{count}</h1>{/* 调用 dispatch 分发 action */}<button onClick={() => dispatch(increment(2))}>数值增加</button><button onClick={() => dispatch(decrement(5))}>数值减少</button></div>)
}

五、 Redux 数据流

在这里插入图片描述

  • 任何一个组件都可以直接接入 Redux,也就是可以直接:1 修改 Redux 状态 2 接收 Redux 状态
  • 并且,只要 Redux 中的状态改变了,所有接收该状态的组件都会收到通知,也就是可以获取到最新的 Redux 状态
  • 跨组件可直接通讯

六、代码结构

  • 在使用 Redux 进行项目开发时,不会将 action/reducer/store 都放在同一个文件中,而是会进行拆分
  • 可以按照以下结构,来组织 Redux 的代码:
/store        --- 在 src 目录中创建,用于存放 Redux 相关的代码/actions.js    --- 存放所有的 action/reducers.js   --- 存放所有的 reducerindex.js    --- redux 的入口文件,用来创建 store

示例actions.js

export const AddMoney = (money) => ({ type: 'add_money', money })
export const SubMoney = (money) => ({ type: 'sub_money', money })

示例reducers.js

export default function reducer(state = 1000, action) {if (action.type === 'add_money') {return state + action.money}if (action.type === 'sub_money') {return state - action.money}return state
}

示例index.js

//createStore 方法已被启用
import { legacy_createStore as createStore } from 'redux'import reducer from './reducer'
console.log('reducer', reducer)
const store = createStore(reducer)export default store

七、ActionType的使用

  • Action Type 指的是:action 对象中 type 属性的值
  • Redux 项目中会多次使用 action type,比如,action 对象、reducer 函数、dispatch(action) 等
  • 目标:集中处理 action type,保持项目中 action type 的一致性
  • action type 的值采用:'domain/action'(功能/动作)形式,进行分类处理,比如,
    • 计数器:'counter/increment' 表示 Counter 功能中的 increment 动作
    • 登录:'login/getCode' 表示登录获取验证码的动作
    • 个人资料:'profile/get' 表示获取个人资料

步骤

  • 1.在 store 目录中创建 actionTypes 目录或者 constants 目录,集中处理
  • 2.创建常量来存储 action type,并导出
  • 3.将项目中用到 action type 的地方替换为这些常量,从而保持项目中 action type 的一致性

核心代码

// actionTypes 或 constants 目录:const increment = 'counter/increment'
const decrement = 'counter/decrement'export { increment, decrement }// --// 使用:// actions/index.js
import * as types from '../acitonTypes'
const increment = payload => ({ type: types.increment, payload })
const decrement = payload => ({ type: types.decrement, payload })// reducers/index.js
import * as types from '../acitonTypes'
const reducer = (state, action) => {switch (action.type) {case types.increment:return state + 1case types.decrement:return state - action.payloaddefault:return state}
}
  • 注:额外添加 Action Type 会让项目结构变复杂,此操作可省略。但,domain/action 命名方式强烈推荐!

八、Reducer的分离与合并

  • 随着项目功能变得越来越复杂,需要 Redux 管理的状态也会越来越多
  • 此时,有两种方式来处理状态的更新
    • 1.使用一个 reducer:处理项目中所有状态的更新
    • 2.用多个 reducer:按照项目功能划分,每个功能使用一个 reducer 来处理该功能的状态更新
  • 推荐:使用多个 reducer(第二种方案),每个 reducer 处理的状态更单一,职责更明确
  • 此时,项目中会有多个 reducer,但是 store 只能接收一个 reducer,因此,需要将多个 reducer 合并为一根 reducer,才能传递给 store
  • 合并方式:使用 Redux 中的 combineReducers 函数
  • 注意:合并后,Redux 的状态会变为一个对象,对象的结构与 combineReducers 函数的参数结构相同

核心代码

import { combineReducers } from 'redux'// 计数器案例,状态默认值为:0
const aReducer = (state = 0, action) => {}
// Todos 案例,状态默认值为:[]
const bReducer = (state = [], action) => {}// 合并多个 reducer 为一个 根reducer
const rootReducer = combineReducers({a: aReducer,b: bReducer
})// 创建 store 时,传入 根reducer
const store = createStore(rootReducer)// 此时,合并后的 redux 状态: { a: 0, b: [] }

九、购物挣钱案例

  • 基本结构 跟组件下包含两个子组件
  • 实现功能 点击子组件对应的按钮 实现根组件 兄弟组件资金的更改
  • 需安装react-redux 和 redux
    在这里插入图片描述

代码基本目录

在这里插入图片描述

index.js 代码

import ReactDom from 'react-dom/client'
import App from './App'
//引入Provider
import { Provider } from 'react-redux'//引入store
import store from './store/index'ReactDom.createRoot(document.querySelector('#root')).render(<Provider store={store}><App></App></Provider>
)

App.js代码

import Women from './components/women'
import Man from './components/man'
//引入useSelector 
import { useSelector } from 'react-redux'export default function App() {const money = useSelector((state) => {return state.money})return (<div><h1>我是根组件</h1><div>资金:{money}</div><Women></Women><Man></Man></div>)
}

women组件

//引入  useSelector, useDispatch
import { useSelector, useDispatch } from 'react-redux'//引入 action下的SubMoney 
import { SubMoney } from '../store/action'export default function Man() {const money = useSelector((state) => state.money)const dispath = useDispatch()return (<div><h3>女人组件</h3><div>金钱:{money}</div><buttononClick={() => {dispath(SubMoney(500))}}>买包-500</button></div>)
}

men组件

//引入  useSelector, useDispatch
import { useSelector, useDispatch } from 'react-redux'//引入action下的 AddMoney 
import { AddMoney } from '../store/action'export default function Women() {const money = useSelector((state) => state.money)const dispath = useDispatch()return (<div><h3>男人组件</h3><div>金钱:{money}</div><button onClick={() => dispath(AddMoney(10))}>搬砖 + 10</button><button onClick={() => dispath(AddMoney(10000))}>卖肾 + 10000</button></div>)
}

store文件下的action.js 代码

//按需导出
export const AddMoney = (money) => ({ type: 'add_money', money })
export const SubMoney = (money) => ({ type: 'sub_money', money })

store文件下的reducer.js 代码

//引入 combineReducers
import { combineReducers } from 'redux'//user模块
function user(state = { name: '张三', age: '20岁' }, action) {return state
}
//money 模块
function money(state = 1000, action) {if (action.type === 'add_money') {return state + action.money}if (action.type === 'sub_money') {return state - action.money}return state
}//模块化
const rootReducer = combineReducers({user,money,
})console.log('导出', rootReducer)
export default rootReducer

store文件下的index.js 代码

//createStore 方法已被启用
import { legacy_createStore as createStore } from 'redux'import reducer from './reducer'
console.log('reducer', reducer)
const store = createStore(reducer)export default store

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

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

相关文章

计算机视觉的应用11-基于pytorch框架的卷积神经网络与注意力机制对街道房屋号码的识别应用

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用11-基于pytorch框架的卷积神经网络与注意力机制对街道房屋号码的识别应用&#xff0c;本文我们借助PyTorch&#xff0c;快速构建和训练卷积神经网络&#xff08;CNN&#xff09;等模型&#xff0c;…

【Redis从头学-5】Redis中的List数据类型实战场景之天猫热销榜单

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Re…

Debain和MariaDB简单设置

1. Debian静态ip设置 没有网络寸步难行&#xff0c;所以要首先设置静态IP访问&#xff0c;确保网络正常。 设置静态IP vi /etc/network/interfacesauto ens33 # 开机自启ens33网卡 iface lo inet loopback # 设置回环网卡 allow-hotplug ens33 ifac…

git错误记录

露id没有影响&#xff0c;搞得微软不知道我ip一样 git fatal: 拒绝合并无关的历史的错误解决(亲测有效)

校园网安全风险分析

⒈物理层的安全风险分析 网络的物理安全风险主要指网络周边环境和物理特性引起的网络设备和线路的不可用 , 而 造成网络系统的不可用。我们在考虑校园网络安全时&#xff0c;首先要考虑物理安全风险&#xff0c;它是整个 网络系统安全的前提。物理安全风险有&#xff1a;设备…

mybatis缓存

目的&#xff1a;提高查询效率。 映射语句文件中的所有 select 语句的结果将会被缓存。映射语句文件中的所有 insert、update 和 delete 语句会刷新缓存。缓存会使用最近最少使用算法&#xff08;LRU, Least Recently Used&#xff09;算法来清除不需要的缓存。缓存不会定时进行…

Matplotlib绘图知识小结--Python数据分析学习

一、Pyplot子库绘制2D图表 1、Matplotlib Pyplot Pyplot 是 Matplotlib 的子库&#xff0c;提供了和 MATLAB 类似的绘图 API。 Pyplot 是常用的绘图模块&#xff0c;能很方便让用户绘制 2D 图表。 Pyplot 包含一系列绘图函数的相关函数&#xff0c;每个函数会对当前的图像进行…

Spring 整合RabbitMQ,笔记整理

1.创建生产者工程 spring-rabbitmq-producer 2.pom.xml添加依赖 <dependencies><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.1.7.RELEASE</version></dep…

爬虫框架- feapder + 爬虫管理系统 - feaplat 的学习简记

文章目录 feapder 的使用feaplat 爬虫管理系统部署 feapder 的使用 feapder是一款上手简单&#xff0c;功能强大的Python爬虫框架 feapder 官方文档 文档写的很详细&#xff0c;可以直接上手。 基本命令&#xff1a; 创建爬虫项目 feapder create -p first-project创建爬虫 …

根据源码,模拟实现 RabbitMQ - 实现消息持久化,统一硬盘操作(3)

目录 一、实现消息持久化 1.1、消息的存储设定 1.1.1、存储方式 1.1.2、存储格式约定 1.1.3、queue_data.txt 文件内容 1.1.4、queue_stat.txt 文件内容 1.2、实现 MessageFileManager 类 1.2.1、设计目录结构和文件格式 1.2.2、实现消息的写入 1.2.3、实现消息的删除…

如何将常用的jdbc方法封装起来???

你是否还在为每次新建项目连接数据库而烦恼&#xff1f;&#xff1f;&#xff1f;&#xff08;教你一次代码&#xff0c;简单完成每次连接&#xff09; 1.建立maven项目 还没下载安装或者不会建立maven项目的可以看这里哦&#xff1a;maven的下载安装与配置环境变量&#xff0…

设计模式——创建型

1.单例模式 单例模式主要用于某个类有且只能用一个对象的场景&#xff0c;单例模式下不能外部实例化对象&#xff0c;由类内部自行私有化实例对象并提供一个可以获得该对象的方法。单例模式主要有饿汉模式&#xff08;安全&#xff0c;但在编译时就会自动创建对象&#xff0c;…

小程序变化历史记录

2023年8月26 小程序机号快速验证组件将需要付费使用 自2023年8月26日起&#xff0c;手机号快速验证组件将需要付费使用。标准单价为&#xff1a;每次组件调用成功&#xff0c;收费0.03元 https://blog.csdn.net/qq_37215621/article/details/131453551 自2023年9月1日起&…

javascript期末作业【三维房屋设计】 【源码+文档下载】

1、引入three.js库 官网下载three.js 库 放置目录并引用 引入js文件: 设置场景&#xff08;scene&#xff09; &#xff08;1&#xff09;创建场景对象 &#xff08;2&#xff09;设置透明相机 1,透明相机的优点 透明相机机制更符合于人的视角,在场景预览和游戏场景多有使用…

VALN-hybrid模式

实验拓扑及要求 一、实验思路 1.R1-R3按要求配置&#xff0c;R2不划分vlan使其全部都可以访问 2.交换机和路由器的交换机直连接口设为hybrid模式且R4-R6不带vlan标签访问路由器 3.交换机和交换机的两个直连接口设为hybrid模式且只允许R4-R6所在vlan标签通过 4.R4-R6只允许其…

怎么对视频进行压缩?

怎么对视频进行压缩&#xff1f;视频压缩&#xff0c;我们都知道是将视频文件进行压缩变小的过程&#xff0c;是我们日常办公中较为常用的手段。现如今&#xff0c;在视频技术不断发展与创新的基础上&#xff0c;视频分辨率也在不断提高&#xff0c;进而导致文件占有量也非常大…

益智游戏:边玩边学习边成长的全新体验

在这个数字化时代&#xff0c;游戏已经不再是简单的娱乐方式&#xff0c;而是一种崭新的学习和成长机会。益智游戏正以其独特的魅力&#xff0c;成为越来越多人的追求。这类游戏不仅仅是为了娱乐&#xff0c;更是在娱乐的过程中&#xff0c;边玩边学习&#xff0c;边娱乐边成长…

img元素

文章目录 imgstyle与a元素联用与map元素联用area 和figure元素联用文字与图片在同一行解决方法 希望设置导航中链接文字的盒子宽度&#xff0c;高度希望手动设定盒子位置关于div包裹img、iframe等标签会多3px或4px的问题图片失效时的宽高问题 img 图片元素&#xff0c;程序样例…

2023河南萌新联赛第(五)场:郑州轻工业大学

A.买爱心气球 原题链接 : 登录—专业IT笔试面试备考平台_牛客网 博弈论 : #include <iostream> using namespace std; int t,n,m; string s1 "Alice",s2 "Bob"; int main() {cin>>t;while(t--){cin>>n>>m;if (n % 3 0) {cou…

【HarmonyOS】codelab在hvigor版本2.4.2上无法运行问题

【关键字】 HarmonyOS、codelab、hvigor 【问题描述】 有cp反馈集成鸿蒙codelab报错。 下载音乐专辑示例文件&#xff08;一次开发&#xff0c;多端部署-音乐专辑&#xff08;ArkTS&#xff09; (huawei.com)&#xff09;后构建项目&#xff0c;显示找不到2.5.0的hvigor。 …