第47节——使用bindActionCreators封装actions模块
一、什么是action creators
1、概念
在Redux中,Action Creators是一种函数,它用于创建一个描述应用程序状态变化的action对象。Action对象是一个普通JavaScript对象,它包含一个描述action类型的字符串属性(通常称为“type”),以及与该操作相关的其他属性。
Action Creators 是 Redux 应用程序的重要部分,因为它们提供了一种清晰和标准化的方式来描述应用程序中的操作,并将这些操作转化为 Redux 可以理解的形式。此外,Action Creators 还允许应用程序的各个部分之间进行通信,包括 React 组件和 Redux Store。
2、例子
一下部分就是一个简单的action creators
function incrementCounter() {return { type: 'INCREMENT_COUNTER' };
}
二、什么是bindActionCreators
1、概念
bindActionCreators 是 Redux 中的一个函数,用于将多个 action creators 绑定到 dispatch 函数上,使得可以在 Redux 应用中轻松调用这些 action creators。
2、基本语法
/*** 接收两个参数* 第一个参数 actionCreators:一个 Action Creator 函数或包含多个 Action Creator 函数的对象。* 如果是对象,则对象的键名将用作 Action Creator 函数的名称。* dispatch:Redux Store 的 dispatch 函数。* * bindActionCreators 的返回值是一个对象,* 这个对象包含了与原始 action creators 同名的函数,* 但这些函数在调用时会自动派发一个 action,而不需要手动调用 dispatch。* 这个返回的对象可以直接作为组件的 props 传递给 React 组件使用*/
const actions = bindActionCreators({ incrementCounter }, dispatch);
三、封装一个userActions hooks
将多个 Action Creator 函数绑定到 Redux store 的 dispatch 函数上,使它们能够被在组件中直接调用。
import { useMemo } from "react";
import { useDispatch } from "react-redux";
import { bindActionCreators } from "redux";/**** @param {} actionCreators* 接收一个actionCreators对象* @returns*/
export const useAction = (actionCreators) => {const dispatch = useDispatch();return bindActionCreators(actionCreators, dispatch);
};// 进阶使用useMemo
// export const useAction = (actionCreators) => {
// const dispatch = useDispatch();
// return useMemo(() => {
// console.log("调用了");
// return bindActionCreators(actionCreators, dispatch);
// }, [actionCreators, dispatch]);
// };
四、基本使用
1、创建actions目录,并在目录里创建user.js模块
import { bindActionCreators } from "redux";
import { useDispatch } from "react-redux";function addAge() {return {type: "user/addAge",};
}export default {addAge,
};
2、在reducer模块中添加user.js模块
import produce from "immer";const defaultState = {name: "李光明",age: 20,
};export const userReducer = (state = defaultState, action) => {switch (action.type) {/*** reducer模块化后命名* 一般要求全局唯一* 一般来可以采用模块名/case名的方式*/case "user/addAge":// 如果使用了之间封装的immer中间件则必须使用immer更新// return produce(state, draft => {// draft.age += 1// })return {...state, age: state.age + 1}default:return state;}
};
3、页面中使用
import { useSelector } from "react-redux";
import { useAction } from "./store/utils";
import userActionCreators from "./store/actions/user";
import { compose } from "redux";export default function LearnRedux3() {const state = useSelector((state) => state.user);/*** 所以的action最终都要使用dispath分发* 那么我就使用直接把action creator 和 dispath绑定* 在页面中直接使用*/const action = useAction(userActionCreators);const add = () => {console.log(action);action.addAge();};return (<div><div>年龄:{state.age}</div><button onClick={() => add()}>过年</button></div>);
}
相关文章:
第47节——使用bindActionCreators封装actions模块
一、什么是action creators 1、概念 在Redux中,Action Creators是一种函数,它用于创建一个描述应用程序状态变化的action对象。Action对象是一个普通JavaScript对象,它包含一个描述action类型的字符串属性(通常称为“type”&…...
QT、c/c++通过宏自动判断平台
QT、c/c通过宏自动判断平台 Chapter1 QT、c/c通过宏自动判断平台 Chapter1 QT、c/c通过宏自动判断平台 原文链接:https://blog.csdn.net/qq_32348883/article/details/123063830 背景 为了更好的进行跨平台移植、编译、调试。 具体操作 宏操作 #ifdef _WIN32//d…...
对比表:阿里云轻量应用服务器和服务器性能差异
阿里云服务器ECS和轻量应用服务器有什么区别?轻量和ECS优缺点对比,云服务器ECS是明星级云产品,适合企业专业级的使用场景,轻量应用服务器是在ECS的基础上推出的轻量级云服务器,适合个人开发者单机应用访问量不高的网站…...
中国1km分辨率月最低温和最高温度数据集(1901-2020)
简介: 中国1km分辨率月最低温度数据集(1901-2020)是根据CRU发布的全球0.5气候数据集以及WorldClim发布的全球高分辨率气候数据集,通过Delta空间降尺度方案在中国地区降尺度生成的。使用了496个独立气象观测点数据进行验证&#x…...
EasyX图形库note4,动画及键盘交互
大家好,这里是Dark Flame Master,专栏从这篇开始就会变得很有意思,我们可以利用今天所学的只是实现很多功能,同样为之后的更加好玩的内容打下基础,从这届开始将会利用所学的知识制作一些小游戏,废话不多说&…...
C++设计模式-原型(Prototype)
目录 C设计模式-原型(Prototype) 一、意图 二、适用性 三、结构 四、参与者 五、代码 C设计模式-原型(Prototype) 一、意图 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。 二、适用性 当…...
[补题记录] Atcoder Beginner Contest 322(E)
URL:https://atcoder.jp/contests/abc322 目录 E Probelm/题意 Thought/思路 Code/代码 E Probelm/题意 有 N 个改进计划,每个计划可以执行一次;有 K 个参数,每个计划可以将所有参数提升固定值,即计划 i 可以为第…...
目标检测算法改进系列之Backbone替换为FocalNet
FocalNet 近些年,Transformers在自然语言处理、图像分类、目标检测和图像分割上均取得了较大的成功,归根结底是自注意力(SA :self-attention)起到了关键性的作用,因此能够支持输入信息的全局交互。但是由于…...
buuctf-[BSidesCF 2020]Had a bad day 文件包含
打开环境 就两个按钮,随便按按 url变了 还有 像文件包含,使用php伪协议读取一下,但是发现报错,而且有两个.php,可能是自己会加上php后缀 所以把后缀去掉 /index.php?categoryphp://filter/convert.base64-encode/resourcei…...
Elasticsearch:什么时候应该考虑在 Elasticsearch 中添加协调节点?
仅协调节点(coordinating only nodes)充当智能负载均衡器。 仅协调节点的这种特殊角色通过减轻数据和主节点的协调责任,为广泛的集群提供了优势。 加入集群后,这些节点与任何其他节点类似,都会获取完整的集群状态&…...
Dubbo3应用开发—Dubbo注册中心引言
Dubbo注册中心引言 什么是Dubbo注册中心 Dubbo的注册中心,是Dubbo服务治理的⼀个重要的概念,他主要用于 RPC服务集群实例的管理。 注册中心的运行流程 使用注册中心的好处 可以有效的管理RPC集群的健康情况,动态的上线或者下线服务。让我…...
AS环境,版本问题,android开发布局知识
项目模式下有一个build.gradle,每个模块也有自己的build.gradle Android模式下有多个build.gradle,汇总在一起。(都会有标注是哪个模块下的) C:\Users\Administrator\AndroidStudioProjects 项目默认位置 Java web项目与android项目的区别…...
OpenCV查找和绘制轮廓:findContours和drawContours
1 任务描述: 绘制图中粗线矩形的2个边界,并找到其边界的中心线 图1 原始图像 2.函数原型 findContours( InputOutputArray image, OutputArrayOfArrays contours, OutputArray hierarchy, int mode, …...
毕设-原创医疗预约挂号平台分享
医疗预约挂号平台 不是尚医通项目,先看项目质量(有源码论文) 项目链接:医疗预约挂号平台git地址 演示视频:医疗预约挂号平台 功能结构图 登录注册模块:该模块具体分为登录和注册两个功能,这些…...
PLL锁相环倍频原理
晶振8MHz,但是处理器输入可以达到72MHz,是因为PLL锁相环提供了72MHz。 锁相环由PD(鉴相器)、LP(滤波器)、VCO(压控振荡器)组成。 处理器获得的72MHz并非晶振提供,而是锁…...
POJ 2886 Who Gets the Most Candies? 树状数组+二分
一、题目大意 我们有N个孩子,每个人带着一张卡片,一起顺时针围成一个圈来玩游戏,第一回合时,第k个孩子被淘汰,然后他说出他卡片上的数字A,如果A是一个正数,那么下一个回合他左边的第A个孩子被淘…...
阿里云服务器镜像系统Anolis OS龙蜥详细介绍
阿里云服务器Anolis OS镜像系统由龙蜥OpenAnolis社区推出,Anolis OS是CentOS 8 100%兼容替代版本,Anolis OS是完全开源、中立、开放的Linux发行版,具备企业级的稳定性、高性能、安全性和可靠性。目前阿里云服务器ECS可选的Anolis OS镜像系统版…...
数学建模Matlab之基础操作
作者由于后续课程也要学习Matlab,并且之前也进行了一些数学建模的练习(虽然是论文手),所以花了几天零碎时间学习Matlab的基础操作,特此整理。 基本运算 a55 %加法,同理减法 b2^3 %立方 c5*2 %乘法 x 1; …...
[计算机入门] Windows附件程序介绍(工具类)
3.14 Windows附件程序介绍(工具类) 3.14.1 计算器 Windows系统中的计算器是一个内置的应用程序,提供了基本的数学计算功能。它被设计为一个方便、易于使用的工具,可以满足用户日常生活和工作中的基本计算需求。 以下是计算器程序的主要功能:…...
队列(循环数组队列,用队列实现栈,用栈实现队列)
基础知识 队列(Queue):先进先出的数据结果,底层由双向链表实现 入队列:进行插入操作的一端称为队尾出队列:进行删除操作的一端称为对头 常用方法 boolean offer(E e) 入队 E(弹出元素的类型) poll() 出队 peek() 获取队头 int size 获取队列元素个数 boolean isEmpty(…...
雷达点云与相机标定避坑指南:如何用MATLAB Lidar Camera Calibrator提高标定精度
MATLAB Lidar Camera Calibrator实战:高精度标定的7个关键步骤与避坑策略 当激光雷达与相机数据需要融合时,标定精度直接决定了后续感知算法的上限。许多工程师在首次使用MATLAB Lidar Camera Calibrator时,常因自动标定结果不理想而陷入困惑…...
从卡顿到实时:Shenyu网关WebSocket通知系统如何解决微服务配置同步难题
从卡顿到实时:Shenyu网关WebSocket通知系统如何解决微服务配置同步难题 你是否遇到过这样的困境:API网关配置更新后,客户端需要等待数分钟甚至更长时间才能生效?在秒杀活动等高并发场景下,这种延迟可能导致流量分配不…...
如何快速实现Blade框架国际化:多语言和本地化的完整指南
如何快速实现Blade框架国际化:多语言和本地化的完整指南 【免费下载链接】blade :rocket: Lightning fast and elegant mvc framework for Java8 项目地址: https://gitcode.com/gh_mirrors/bl/blade Blade是一款基于Java8的轻量级MVC框架,以其闪…...
三相桥式整流电路有源逆变状态的研究:基于Matlab仿真的直流发电机电动系统电能流转关系分析
三相桥式整流电路有源逆变状态 Matlab仿真可写报告 直流发电机电动系统入手,研究电能流转关系,再转入变流器分析交流和直流电之间流转,掌握有源逆变条件。玩过直流电机调速的朋友可能遇到过这样的情况:明明在减速状态,…...
FSCalendar终极指南:打造完美iOS日历体验的完整教程
FSCalendar终极指南:打造完美iOS日历体验的完整教程 【免费下载链接】FSCalendar A fully customizable iOS calendar library, compatible with Objective-C and Swift 项目地址: https://gitcode.com/gh_mirrors/fs/FSCalendar FSCalendar是一款功能强大且…...
5分钟精通:开源内容解锁工具Bypass Paywalls Clean完全指南
5分钟精通:开源内容解锁工具Bypass Paywalls Clean完全指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代,学术文献、专业报道和深度分…...
RWKV7-1.5B-g1a多场景落地:HR部门用它自动生成岗位JD要点与面试问题清单
RWKV7-1.5B-g1a多场景落地:HR部门用它自动生成岗位JD要点与面试问题清单 1. 为什么HR部门需要AI助手 招聘工作中有大量重复性文案工作,比如: 为不同岗位编写职位描述(JD)设计结构化面试问题整理岗位核心能力要求制作候选人评估标准 传统方…...
黑马点评技术汇总(一)验证码登录
一、session实现验证码登录总思路: 前端提交手机号发起code请求,服务端校验手机号是否符合格式,成功后生成验证码存入session并发送给用户。 用户提交手机号和验证码验证手机是否符合格式(这里有个bug)验证码是否和ses…...
Llama-3.2V-11B-cot开发者案例:基于Streamlit定制化UI扩展实践
Llama-3.2V-11B-cot开发者案例:基于Streamlit定制化UI扩展实践 1. 项目概述 Llama-3.2V-11B-cot是一款基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡4090环境进行了深度优化,特别修复了视觉权重加载的关键问题&am…...
光场相机入门:Macro Pixel与SAI如何让你的照片秒变3D(附Python代码示例)
光场相机实战指南:用Macro Pixel与SAI技术打造沉浸式3D影像 当你第一次看到光场相机拍摄的照片能在屏幕上自由切换焦点时,那种震撼感就像发现了摄影的新维度。这背后是Macro Pixel和SAI两项核心技术的完美配合——它们让静态图像拥有了动态的视角选择能力…...
