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.hqwc.cn/news/82057.html

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

相关文章

基于CentOS7.9安装部署docker（简洁版）

基于CentOS7.9安装部署docker（简洁版）

安装部署 1基于官方脚本安装&#xff08;不推荐 不能自行选择版本&#xff09; 官方文档&#xff1a;https://docs.docker.com/engine/install/centos/ 2 使用yum安装 阿里云文档&#xff1a;docker-ce镜像_docker-ce下载地址_docker-ce安装教程-阿里巴巴开源镜像站 # ste…
阅读更多...
大数据课程K6——Spark的Shuffle详解

大数据课程K6——Spark的Shuffle详解

文章作者邮箱：yugongshiye@sina.cn 地址：广东惠州 ▲ 本章节目的 ⚪ 了解Spark的定义&&特点&&目的&&优缺点； ⚪ 掌握Spark的相关参数配置； ⚪ 掌握Hadoop的插件配置； 一、Spark Shuffle详解 1. 概述 Shuffle，就是洗牌。之所以…
阅读更多...
python爬虫实战(3)--爬取某乎热搜

python爬虫实战(3)--爬取某乎热搜

1. 分析爬取地址 打开某乎首页&#xff0c;点击热榜 这个就是我们需要爬取的地址&#xff0c;取到地址某乎/api/v3/feed/topstory/hot-lists/total?limit50&desktoptrue 定义好请求头&#xff0c;从Accept往下的请求头全部复制&#xff0c;转换成json headers {Accep…
阅读更多...
Nacos配置管理、Feign远程调用、Gateway服务网关

Nacos配置管理、Feign远程调用、Gateway服务网关

1.Nacos配置管理 1.1.将配置交给Nacos管理的步骤 1.在Nacos中添加配置 Data Id服务名称-环境名称.yaml eg&#xff1a;userservice-dev.yaml 2.引入nacos-config依赖 在user-service服务中&#xff0c;引入nacos-config的客户端依赖 <!--nacos配置管理依赖--> <dep…
阅读更多...
elment-ui中使用el-steps案例

elment-ui中使用el-steps案例

el-steps案例 样式 代码 <div class"active-box"><div class"active-title">请完善</div><el-steps :active"active" finish-status"success" align-center><el-step title"第一步" /><…
阅读更多...
恒运资本：什么是股票分红和基金分红？两者有什么区别？

恒运资本：什么是股票分红和基金分红？两者有什么区别？

出资者在进行股票出资和基金出资的时分&#xff0c;能够参与股票分红或许基金分红&#xff0c;可是许多新手对分红不是很了解。那么什么是股票分红和基金分红&#xff1f;两者有什么区别&#xff1f;下面就由恒运资本为大家分析&#xff1a; 什么是股票分红和基金分红&#xff…
阅读更多...
阿里云服务器和腾讯云服务器折扣对比_哪家折扣低？

阿里云服务器和腾讯云服务器折扣对比_哪家折扣低？

阿里云服务器和腾讯云服务器根据购买时长可以享受一定的优惠折扣&#xff0c;综合对比下来腾讯云折扣更低&#xff0c;阿腾云来对比下阿里云和腾讯云的云服务器根据购买时长可以享受的常规折扣对比&#xff1a; 目录 阿里云和腾讯云折扣对比 阿里云服务器常规折扣 腾讯云服…
阅读更多...
【LeetCode 】数组简介

【LeetCode 】数组简介

集合列表和数组 本文中介绍的概念为适用于所有编程语言的抽象理论&#xff0c;具体实现会由编程语言的不同而稍有差别。 具体介绍数组之前&#xff0c;我们先来了解一下集合、列表和数组的概念之间的差别。 集合 集合一般被定义为&#xff1a;由一个或多个确定的元素所构成的…
阅读更多...
【前端】深入理解CSS盒子模型与浮动

【前端】深入理解CSS盒子模型与浮动

目录 一、前言二、盒子模型1、盒子模型组成1.1、border边框1.1.1、边框的三部分组成1.1.2、边框复合简写1.1.3、边框分开写1.1.4、表格的细线边框 1.2、padding内边距1.3、margin外边距1.3.1、外边距水平居中1.3.2、外边距合并1.3.3、嵌套块元素垂直 外边距的塌陷1.3.3.1、解决…
阅读更多...
浅谈Spark的RDD、部署模式

浅谈Spark的RDD、部署模式

一、RDD Spark RDD&#xff08;弹性分布式数据集&#xff09;&#xff0c;弹性是指Spark可以通过重新计算来自动重建丢失的分区。 从本质上讲&#xff0c;RDD 是数据元素的不可变分布式集合&#xff0c;跨集群中的节点进行分区&#xff0c;可以与提供转换和操作的低级 API 并行…
阅读更多...
滑动验证组件---设置movable-view组件的x属性在微信小程序端失效的问题

滑动验证组件---设置movable-view组件的x属性在微信小程序端失效的问题

场景 采用uniapp的movable-view组件实现滑动验证组件。 流程 滑块未滑到最右端时&#xff0c;回弹到原点滑块滑到最右端时&#xff0c;则显示滑动结束&#xff0c;不可再滑动 问题 频繁设置uniapp的movable-view组件的x属性&#xff0c;在H5端正常&#xff0c;但在微信小程…
阅读更多...
微调llama2模型教程：创建自己的Python代码生成器

微调llama2模型教程：创建自己的Python代码生成器

本文将演示如何使用PEFT、QLoRa和Huggingface对新的lama-2进行微调&#xff0c;生成自己的代码生成器。所以本文将重点展示如何定制自己的llama2&#xff0c;进行快速训练&#xff0c;以完成特定任务。 一些知识点 llama2相比于前一代&#xff0c;令牌数量增加了40%&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023