Redux(二)

最新推荐文章于 2024-09-26 01:42:12 发布
最新推荐文章于 2024-09-26 01:42:12 发布
阅读量87 收藏
点赞数 1
分类专栏： react redux react跨组件通讯 文章标签： javascript react redux
不许偷代码哦，一键三连以后我的代码就是你的代码！！！
本文链接：https://blog.csdn.net/Youyzq/article/details/121379704
版权

其实基础版的redux，已经可以完成基本功能了，但是为了代码的规范性和逻辑性，就需要将完整版的传授给大家
我们先来看一下第一章完成的效果
在这里插入图片描述
目录结构
在这里插入图片描述
创建action.js
在这里插入图片描述
在redux中不推荐在在dispatch中直接写键值对类型的参数，应该是用function的写法，这样可以降低代码的耦合性，提高代码的可读性，维护起来更方便。

在这里插入图片描述
actions文件夹，意思是将所有的actions类型的js文件存放进去，统一管理
在这里插入图片描述
这是actions的内容
如何使用呢，需要在组件中导入使用
在这里插入图片描述
但是，还是有一点不如意的地方，比如type的类型，我总不能改一处，我的actions和reducer里都需要做更改吧，做完最后一步，就完成啦！！！

创建constant.js是声明常量的意思
在这里插入图片描述
将要使用的变量名，写入到 .js文件中在reducer和actions中使用

actions
在这里插入图片描述
reduer
在这里插入图片描述
这样的话我需要更改变量的时候，只需要在constant.js中修改，其他地方就无需做修改了
以上就是简易版redux完整版

总结：

  • 一般场景是用不到redux的，除非遇到无法解决的组件传递才会使用
  • redux，主要分为reducer和actions
  • createStore(reduer)
  • reducer 分为 mapstate(初始值)，action(actions对象)
  • actions 通过stroe.disptach({actions})
  • actions对象，必须要有type这个key,其他自己定义
Youyzq
关注
专栏目录
Redux源码解析与实现（二）
09-05
在本篇中，我们将深入探讨Redux的源码解析与实现，重点关注其核心概念、工作原理以及如何通过 DIY Redux 来加深理解。Redux 是一个 JavaScript 库，用于管理应用的状态，尤其在复杂前端项目中，它提供了可预测化的...
Redux入门基础教程
08-10
**二、Redux 工作流程** 1. **Dispatch Action**: 当应用需要改变状态时，会 dispatch 一个 action。 2. **Store 调用 Reducer**: Store 收到 action 后，会调用注册的 reducer，并传递当前状态和 action。 3. **...
Redux
qq_43539854的博客
04-27 480
Redux 对Redux的理解 Redux是一个用来管理数据状态的工具。因为React传递数据是单向的，父组件可以向子组件通过props传递数据，而子组件无法直接向父组件传递数据，这样的单向数据流成就了React的数据可控性。随着项目越来越大，state也越来越难以管理，而使用Redux可以轻松管理这些state。 Redux主要解决的问题 Redux主要解决的问题是将Redux的状态与React的UI绑定到一起，当使用dispatch(action)改变state时可以自动更新页面。 Redux的工作原
react之redux、react-redux、redux-thunk、redux-saga
weixin_44714325的博客
02-02 265
你可能不需要redux Redux 是负责组织 state 的⼯具，但你也要考虑它是否适合你的情况。不要因为有⼈告诉你要⽤ Redux 就去⽤，花点时间好好想想使⽤了 Redux 会带来的好处或坏处。 在下⾯的场景中，引⼊ Redux 是⽐较明智的： 1.你有着相当⼤量的、随时间变化的数据； 2.你的 state 需要有⼀个单⼀可靠数据来源； 3.你觉得把所有 state放在最顶层组件中已经⽆法满⾜需要了。 4.某个组件的状态需要共享。 redux redux 是 JavaScript应⽤的状态容器，
redux学习二
qq_60403325的博客
09-22 194
终极redux npm ireact-redux 1，main.tsx 引入 import { Provider } from "react-redux" import store from "./store" 改写 ReactDom.render( <Provider store={store}> <App></App> </Provider> , document.getElementById("..
《二》react-redux
花铛
01-05 679
是 Facebook 开发的 React 插件库，能更方便地在 React 中使用 Redux。之前分别学过的 React 和 Redux 的部分是不变的，就是将 Redux 中的 Store 和 React 中的组件联系在一起。
Redux学习笔记
qq_29582173的博客
05-06 401
Redux 基础知识 基础介绍 动机 为了更好的管理项目中的状态 Redux 为了让项目中的state变得可预测 核心概念:纯函数 Reducer 纯函数:简单来说就是，接收相同的参数时返回相同的结果。 Reducer:接收一个action和state返回一个新的state。 Redux的核心就是通过reducer来管理项目状态。在大的应用中，我们需要编写很多小函数来管理state的一部分。 Redux也提供了一些工具来简化这种模式，但主要的思想就是通过action对象来修改state。 三大原则
redux
青蛙king的博客
02-09 563
redux 中文官网React Redux 中文文档Redux 是一个管理全局应用状态的库。Redux 的基本思想：应用中使用集中式的全局状态来管理，并明确更新状态的模式，以便让代码具有可预测性。Redux 期望所有状态更新都是使用不可变的方式——更新原数据的复本。并非所有应用程序都需要 Redux，那么，何时需要考虑使用 Redux 呢？应用中有很多 state 在多个组件中需要使用。应用 state 会随着时间的推移而频繁更新。更新 state 的逻辑很复杂。
Redux使用介绍
qq_46492364的博客
03-28 568
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 这部分学习react，上班中要用到的呀。 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import
React学习笔记_redux二
架构师的成长之路的博客
11-07 620
一、 Redux 中间件与异步操作 Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。 使用中间件（middleware）达到异步 一、中间件的概念 Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。View：
redux 之同步数据管理
青蛙king的博客
01-11 733
一、redux 的成员 1、action Action 是一个单纯的包含{ type, payload }的对象，其中： type是一个常量用来标示动作类型； payload是这个动作携带的数据。 通常使用函数来生成 action，它最后会返回一个 action 对象。比如： export function addTodo(text) { return { type: ActionTypes.ADD_TODO, text: text }; } 创建 action...
react-redux-hook-demo:带有钩子api，redux，react-redux，redux-saga的最新功能
05-22
二零二一农历春节前，因瘟疫困于北京，归乡不遂，故作此。 store 为不拆分模块的基础用法，用以尝鲜参考。 newStore 为模块化后的进阶用法，用以工程项目中参考。 如有帮助，还望不吝赐星。 This project was ...
redux-duck:Helper函数使用ducks-modular-redux建议创建Redux模块
03-05
Helper函数使用建议创建Redux模块。 安装 yarn add redux-duck 原料药 创建鸭子 import { createDuck } from "redux-duck" ; const myDuck = createDuck ( "duck-name" , "application-name" ) ; createDuck接收2...
如何搭建Vue脚手架
最新发布
w6437286的博客
09-26 440
本文主要讲解如何搭建vue脚手架。
vue上传预览CAD文件
只会写bug
09-24 590
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于JavaWeb开发的Java+SpringMvc+vue+element实现驾校管理系统详细设计
央顺科技官方博客
09-24 890
机遇与挑战始终并存。在开放的互联网平台面前，驾校预约管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。在早期阶段，在将计算机技术和网络技术融入驾校预约管理系统数据管理方法之前，所有管理方式都通过人工操作完成了管理信息的。系统管理也都将通过计算机进行整体智能化操作，对于驾校预约管理系统所牵扯的管理及数据保存都是非常多的，举例像所有详细信息包括，管理员；首页、个人中心、学员管理、驾校教练管理、驾校车辆管理、预约管理、取消预约管理、驾校公告管理、系统管理。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 236
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
JavaScript --数字Number的常用方法
weixin_58694594的博客
09-25 563
【代码】JavaScript --数字Number的常用方法。
React-Redux源码二次开发学习笔记
（二）Redux概念 Redux是对Flux架构的进一步简化和优化，它是一个可预测的状态容器。Redux强调三个基本原则： 1. 单一数据源：整个应用的状态被储存在一个单一的store中。 2. 状态是只读的：状态只能通过触发actions...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值