React-Redux学习笔记

最新推荐文章于 2024-06-18 18:07:11 发布
最新推荐文章于 2024-06-18 18:07:11 发布
阅读量320 收藏
点赞数
分类专栏： 学习笔记 React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Creabine/article/details/83511273
版权
本文是React-Redux的学习笔记，介绍了Redux的三大原则——单一数据源、State只读和纯函数执行修改。重点讨论了如何通过action和reducer来修改State，并强调了在Reducer中应避免的操作。此外，还讲述了在React组件中如何使用Redux state数据，推荐使用React Redux的`connect()`方法进行优化。最后提到了通过`Provider`组件使所有容器组件都能访问Store。
摘要由CSDN通过智能技术生成

之前用react开发了一些模块，对react的使用也更加熟悉了。最近有空，来总结记录一下react相关生态，系统的梳理一下，便于更好的理解和记忆。

参考资料：

Redux

类比Vuex，Redux也是用来解决复杂SPA中的全局状态管理问题。通过对比来一起记忆。

三大原则：

  • 单一数据源：整个应用只能有一个唯一的Store
  • State 是只读的: 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
  • 使用纯函数来执行修改: 为了描述 action 如何改变 state tree ，你需要编写 reducers

啥叫纯函数？纯函数要满足三个条件：

  • 变量都只在函数作用域内获取,，作为的函数的参数传入，不依赖外部变量。
  • 不会产生副作用， 不会改变被传入的数据或者其他数据。
  • 相同的输入保证相同的输出。

修改State

只能使用action—>reduce—>返回新的state的方式来修改State

实际

最低0.47元/天 解锁文章
Creabine
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习笔记---redux
丑小鸭变黑天鹅的博客
12-31 1343
redux一、redux理解1、学习文档2、redux是什么3、什么情况下需要使用redux4、redux工作流程二、redux的三个核心概念 一、redux理解 1、学习文档 英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux 2、redux是什么 redux是一个专门用于做状态管理的JS库(不是react插件库)。 它可以用在react, angula
React学习笔记四(redux和react-redux和Redux Toolkit)
kianagrow的博客
12-18 846
React学习笔记四(redux和react-redux和Redux Toolkit)
react-redux学习笔记
weixin_33762321的博客
12-27 70
本文针对React+Redux实例中的shouldComponentUpdate函数做一个理解， shouldComponentUpdate(nextProps) { return nextProps.state != this.props.state; } 如果state是一个对象，使用这种表示也是正确的，我们从reducer开...
React： Redux是什么？怎么用？
tuzi007a的博客
09-28 1096
大家好，我是梅巴哥er。本篇介绍redux , react-redux , redux调试工具的一些学习总结。另附一些简单的、便于理解的小案例。 Redux 1，官方文档： https://www.redux.org.cn/ 2，因为redux和react-redux常常一起使用，所以两个文档在一起翻译的。 react-redux官方文档： https://www.redux.org.cn/docs/react-redux/ 3，Redux是什么 redux是一个独立的、专门用于做状态管理的JS库。不
redux与react-redux学习笔记
yezi__6的博客
03-18 2202
少年驰骋，仗剑天涯 愿你眼眸有星辰，心中有大海 从此，以梦为马，不负韶华 redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理。 React-redux是为方便react使用，在redux上封装的库。在实际的项目中我们可以使用redux也可以直接使用react-redux。 1.redux 1.redux的概念 redux和react之间是没有关系的，Redux支持React、angular、jQuery甚至Javascript redux 是一个应用数据流框架，主要是解.
React-Redux学习笔记（自用）
最新发布
weixin_45012973的博客
06-18 329
在reducers的同步修改方法中添加action对象参数，在调用actionCreator时传递参数，参数会被传递到action对象的payload属性上。React-redux负责把Redux和redux连接起来，内置Provider组件通过store参数把创建好的store实例注入到应用中。钩子函数，作用：生成提交的action对象的dispatch函数。钩子函数，把store中的数据映射到组件中。在index,js中组合store。store目录结构设计。创建各模块的store。
React学习笔记九——React-redux的使用详解
2401_84411557的博客
04-29 844
const {value} = this.selectNumberconst {count} = this.propsif(count % 2 !== 0){this.props.increment(value*1)}}incrementAscyn= () => {const {value} = this.selectNumberthis.props.incrementAsync(value*1,500)}render(){return( this.selectNumber
React学习笔记之redux与react-redux
weixin_42644340的博客
07-12 617
React学习笔记之redux与react-redux前言安装redux使用原理定义静态变量constant.js实现ActionCreators(count_action.js)实现Store(store.js)实现Reducers(count_reducer.js)实现Count组件App.js程序入口index.jsreact-redux使用原理容器组件(container->Count->index.js)UI组件(component->Count->index.js)App
react-redux 入门学习笔记
Ranye的博客
06-20 205
刚开始接触 Redux 时，我认为这仅仅是一个管理 state 的小工具。我想象了一个巨大的 component，它的 state 异常繁杂，数组套数组，对象套对象。这时 redux 把编码焦点从 state 上转移，只重视 action，如：在 todolist 的最后加上"写作业"一项，只需 dispatch 一个{ type: “ADD_TODO”, text: “写作业”}的 action 就够了，避免直接和 state 打交道。更深入一些后，我了解到 Redux 可以解决“全局状态”问题。状态提升
React学习笔记九——React-redux的使用详解，面试到三面
时间与思念
04-10 620
/后面我们会讲到多个组件共享数据，到时候store会保存多个组件的reducer,我们会通过redux中一个api去合并所有的reducer产生的值到一个对象里。利用react-redux中的provider方法给App下所有需要store的容器组件传入store,使容器组件与redux关联起来。//此时store仓库只关联了Count组件的reducer，所以redux中只有一个状态值，所以state就是count。//会给App下所有需要store的容器组件传入store。
react-redux-tutorial：react-redux-tutorial中文，目录和代码示例
02-19
在压缩包文件"react-redux-tutorial-master"中，你可能会找到一系列的示例项目、源代码、练习和笔记，这些都是为了帮助你更好地理解和实践React和Redux的结合。通过跟随教程一步步操作，你可以亲手构建一个简单的...
Vue全家桶实践（二）---iView
热门推荐
Creabine的博客
12-23 2万+
最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。 相关博客： Vue全家桶实践（一）—vue-cli Vue全家桶实践（二）—iView Vue全家桶实践（三）—axios Vue全家桶实践（四）—vue-router Vue
Object.assign及在Vue中的应用小技巧
Creabine的博客
08-14 2万+
最近看代码的时候跟同事学到了一招。 Object.assign() Object.assign（）方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 // 目标对象有1个，后边可以有多个源对象。注意他只会拷贝源对象自身且是可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 set...
BigNumber.js
Creabine的博客
07-30 1万+
在新公司的第一个项目是区块链相关的管理后台和交易所，其中就涉及了很多的计算问题。而JavaScript因为存在计算的精度问题，所以直接计算就可能会导致各种各样的bug，为了解决这个问题，就要使用BigNumber.js这个库。 BigNumber.js是一个用于任意精度计算的js库。可以在 官方文档 的console中测试使用。也可以通过npm install bignumber.js --s...
超简单的 Python 根据用户ip查询位置
Creabine的博客
12-29 9005
通过用户IP查询用户位置网上已经有这样的入口，很多都可以查，我这里使用了IP138的查询服务。这网站也是挺逗的，首页丑的不要不要的，登陆之后的页面却好看很多。首先注册一个ip138账号并登陆，在用户中心，IP查询服务中购买次数。我本来都准备掏钱了，没想到居然是免费的……..注册就送了10W积分，查询10W次只要500积分…..蜜汁便宜，也是挺良心的。之后点击左侧进入IP查询服务，获取token码：接
Vue 双向绑定的原理及实现Demo
Creabine的博客
03-01 8837
Vue双向绑定的原理Vue用了一段时间了，一直没有纠结过它的原理，今天看了一篇很不错的文章：Vue.js双向绑定的实现原理，跟着敲了一遍，发现其中有意思的地方还是很多的，一些知识我之前都没有接触过，这里要好好整理一下思路。这篇博客涉及的东西比较多，还需要慢慢整理。目前还未写完。主要的知识点： 1.Vue双向绑定原理（一）文档片段DocumentFragment 2.Vue双向绑定原理（二）访问器
Canvas入门
Creabine的博客
06-28 6777
Canvas是HTML5的新功能，没机会用过，趁有空来学习了解一下。抽空做了个小练习：使用纯CSS和Canvas画哆啦A梦首先是在HTML中使用标签：<canvas id="mycanvas" width="800" height="800" style="其他style"> 你的浏览器不支持canvas，请更换或升级浏览器。 </canvas>然后使用JavaScript来在canvas上边进行绘
CSS3的函数和事件
Creabine的博客
07-09 6238
很久没写过关于css的博客了，今天来记录一下最近遇到的几个新东西。 参考资料： css参考手册 Css3函数 之前只知道sass,less这种预处理器有函数，突然发现css3也吸收了他们的想法，搞了自己的函数。目前css的函数有两个：calc/toggle calc calc就是calculate的缩写，运算。支持 “+”, “-“, “*”, “/” 运算，...
React-Redux源码二次开发学习笔记
"Redux学习笔记，作者newtwg@qq.com，最后修改于2020.02.20，内容涉及React、Redux、Flux等关键词，是作者学习过程的记录，旨在帮助他人快速入门React-Redux开发。" Redux是JavaScript应用的状态管理库，尤其常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值