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

第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>);
}
http://www.lryc.cn/news/183297.html

相关文章:

  • QT、c/c++通过宏自动判断平台
  • 对比表:阿里云轻量应用服务器和服务器性能差异
  • 中国1km分辨率月最低温和最高温度数据集(1901-2020)
  • EasyX图形库note4,动画及键盘交互
  • C++设计模式-原型(Prototype)
  • [补题记录] Atcoder Beginner Contest 322(E)
  • 目标检测算法改进系列之Backbone替换为FocalNet
  • buuctf-[BSidesCF 2020]Had a bad day 文件包含
  • Elasticsearch:什么时候应该考虑在 Elasticsearch 中添加协调节点?
  • Dubbo3应用开发—Dubbo注册中心引言
  • AS环境,版本问题,android开发布局知识
  • OpenCV查找和绘制轮廓:findContours和drawContours
  • 毕设-原创医疗预约挂号平台分享
  • PLL锁相环倍频原理
  • POJ 2886 Who Gets the Most Candies? 树状数组+二分
  • 阿里云服务器镜像系统Anolis OS龙蜥详细介绍
  • 数学建模Matlab之基础操作
  • [计算机入门] Windows附件程序介绍(工具类)
  • 队列(循环数组队列,用队列实现栈,用栈实现队列)
  • 卷积神经网络-池化层和激活层
  • API基础————包
  • 【C++】一文带你走入vector
  • 《Secure Analytics-Federated Learning and Secure Aggregation》论文阅读
  • 十三、Django之添加用户(原始方法实现)
  • Elasticsearch数据操作原理
  • gitgitHub
  • 十天学完基础数据结构-第九天(堆(Heap))
  • vertx的学习总结7之用kotlin 与vertx搞一个简单的http
  • golang学习笔记(二):链路追踪
  • git提交代码实际操作