当前位置: 首页 > news >正文

2023-02-15 学习记录--React-邂逅Redux(二)

React-邂逅Redux(二)

“天道酬勤,与君共勉”——承接React-邂逅Redux(一),让我们一起继续探索Redux的奥秘吧~☺️

一、前言

请添加图片描述

React-邂逅Redux(一)让我们对Redux有了初步认识,但整体文件布局有所缺失,所以让我们一起来看看redux完整版吧~

二、redux完整版还需要什么文件?

请添加图片描述

一、一个生成action对象的文件 ⭐️

首先,React-邂逅Redux(一)中redux精简版里的action并非取自redux原理图里的Action Creators,所以我们需要创建一个生成action对象的文件,目的:别自己写action对象,让人家给你返回一个action对象。

1)、准备
  • 在文件夹redux里新建文件count_action.js,如下图:
    • 文件count_action.js的命名解析:文件是action,负责生成action对象;为谁服务的:组件Count
      在这里插入图片描述
2)、代码

count_action.js

/*该文件专门为Count组件生成action对象
*/
export const createIncrementAction = data => ({type:'increment',data}); // 创建加法的action对象,并暴露出去
export const createDecrementAction = data => ({type:'decrement',data}); // 创建减法的action,并暴露出去
3)、使用

替换掉组件里自定义action对象的地方,如下图:👇🏻

在这里插入图片描述

二、一个常量文件constant.js ⭐️

由于必须保证count_reducer.jscount_action.js文件里的type名相匹配,所以无论两边中的哪一个不小心拼错了,都会导致项目的运行失败,所以我们最好在redux里新建一个常量文件constant.js,用于存放常量模块,目的:便于管理的同时防止程序员单词写错。

1)、准备
  • 在文件夹redux里新建文件constant.js,如下图:
    在这里插入图片描述
2)、代码

constant.js

/**该模块是用于定义action对象中type类型的常量值,目的只有一个:便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'; // 加法的type类型名
export const DECREMENT = 'decrement'; // 减法的type类型名
3)、使用

constant.js文件里定义的type类型常量值替换掉count_reducer.jscount_action.js文件里对应的type名,如下图:👇🏻

在这里插入图片描述在这里插入图片描述

三、总结

请添加图片描述

## 2.求和案例_redux完整版新增文件:1.count_action.js 专门用于创建action对象2.constant.js 放置容易写错的type值

上一篇:React-邂逅Redux(一)

These are bilibili尚硅谷React学习视频的 学习笔记~

http://www.lryc.cn/news/7402.html

相关文章:

  • Framework——【MessageQueue】消息队列
  • SpringBoot依赖原理分析及配置文件
  • 智慧机场,或将成为航空领域数字孪生技术得完美应用
  • SQL64 对顾客ID和日期排序
  • MybatisPlus使用聚合函数
  • 工程管理系统源码企业工程管理系统简介
  • 《计算机视觉和图像处理简介 - 中英双语版》:使用 OpenCV对图像进行空间滤波
  • FreeRTOS软件定时器 | FreeRTOS十三
  • 电脑文件被误删?360文件恢复工具,免费的文件恢复软件
  • pg_cron优化案例--terminate pg_cron launcher可自动拉起
  • Python 之 NumPy 随机函数和常用函数
  • 【目标检测】K-means和K-means++计算anchors结果比较(附完整代码,全网最详细的手把手教程)
  • Java高手速成 | 图说重定向与转发
  • Git:不小心在主分支master上进行修改,怎么才能将修改的数据保存到正确的分支中
  • 都2023年了,如果不会Stream流、函数式编程?你确定能看懂公司代码?
  • 亚马逊云科技汽车行业解决方案
  • 为什么学了模数电还是看不懂较复杂的电路图
  • 帮公司面试了一个30岁培训班出来的程序员,没啥工作经验...
  • 勒索软件、网络钓鱼、零信任和网络安全的新常态
  • python3 字符串拼接与抽取
  • Linux就该这么学:存储结构与管理硬盘
  • JSP四大作用域,九大内置对象
  • 机器学习笔记之生成模型综述(五)重参数化技巧(随机反向传播)
  • 1、创建第一个Android项目
  • 【python百炼成魔】手把手带你学会python数据类型
  • 数据储存以及大小端判断
  • GRASP设计原则
  • 再遇周杰伦隐私协议
  • 关于项目上的一些小操作记录
  • sql查询不以某些指定字符开头(正则表达式)