redux和react-redux的关系:

redux是react的状态管理工具,却不仅仅只是为了react而生的,所以在使用中会存在痛点。而react-redux是专门为了react定制,目的是为了解决redux的痛点,起到了补充的作用。

redux和flux思想:

从代码层面而言,flux无非就是一个常见的event dispatcher,其目的是要将以往MVC中各个View组件内的controller代码片断提取出来放到更加恰当的地方进行集中化管理,并从开发体验上实现了舒适清爽、容易驾驭的“单向流”模式。

但为了区分于以往的MVC模式,并向facebook的贡献表达敬意,后面我们将把这种优化后的 Model-View-Controller 开发模式在React背景下正式称为Flux模式。

redux 的核心概念:

  • 在顶层组件创建一个store(状态实例),底层组件通过props共享这个store。

  • 数据流动的方向:

    component->action->reducer->state->component

    component: 展示结果(含处理结果代码)

    action: 转发的动作,异步请求,

    reducer: 业务处理逻辑,copy+更新 + 返回(return)新state

    state: 状态收集,更新内部state状态,更新订阅(store.subscribe)state的组件(component)

  • 更改state:

    component-->dispatch(action)-->reducer

  • 获取state:

    store.getState() 抓state状态---只能抓取一次

    store.subscribe() 订阅---state更新会触发---首次不更新不触发,导致影响首次渲染

      两种方法可以结合使用

redux和react-redux的更多相关文章

  1. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  2. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  3. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  4. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  5. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  6. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  7. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  8. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  9. react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  10. react+redux教程(二)redux的单一状态树完全替代了react的状态机?

    上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...

随机推荐

  1. Linux就该这么学08学习笔记

    参考链接:https://www.linuxprobe.com/chapter-08.html 防火墙管理工具 众所周知,相较于企业内网,外部的公网环境更加恶劣,罪恶丛生.在公网与企业内网之间充当保护 ...

  2. spring cloud学习笔记二 ribbon负载均衡

    Ribbon是Netflix发布的负载均衡器,它有助于控制HTTP和TCP的客户端的行为.为Ribbon配置服务提供者地址后,Ribbon就可基于某种负载均衡算法,自动地帮助服务消费者去请求.Ribb ...

  3. Go 数组(1)

    1.一旦声明,数组里存储的数据类型和数组长度就都不能改变了.如果需要存储更多的元素, 就需要先创建一个更长的数组,再把原来数组里的值复制到新数组里. 例如: ]int 2.使用数组字面量声明数组 // ...

  4. Python3.5-20190519-廖老师-自我笔记-面向对象中slots变量--@property的使用

    python是动态语言,可以随时随地给实例对象添加属性和方法,但是我们想限制属性的名字,可以使用__slots__特殊变量来限制 使用__slots__要注意,__slots__定义的属性仅对当前类实 ...

  5. 关于vue开发的常见问题

    一.vue单页面回退丢失参数的问题 可能有些跟我一样的新手同学会遇到一个问题,就是比如我从商品详情跳转到购物车,没问题,但是,购物车页面中点击浏览器的回退按钮,返回到detail页面时,你的动态数据( ...

  6. python 关于每个项目的解释器

    在写程序的时候发现了一个问题,就是我原来import的第三方包,在新建的项目里仍然报错,还需要重新下载一次 发现:原来每建一个新项目,python会默认生成另一个新的解释器和相关虚拟环境,包括第三方包 ...

  7. 深度学习中的batch、epoch、iteration的含义

    深度学习的优化算法,说白了就是梯度下降.每次的参数更新有两种方式. 第一种,遍历全部数据集算一次损失函数,然后算函数对各个参数的梯度,更新梯度.这种方法每更新一次参数都要把数据集里的所有样本都看一遍, ...

  8. 2017 ACM-ICPC乌鲁木齐网络赛 B. Out-out-control cars(计算几何 直线相交)

    题目描述 Two out-of-control cars crashed within about a half-hour Wednesday afternoon on Deer Park Avenu ...

  9. Leetcode_897. Increasing Order Search Tree

    题目:https://leetcode.com/problems/increasing-order-search-tree/ 题意: 将一棵二叉搜索树,重排为一棵递增的二叉排序树. 解法1: rson ...

  10. 【CF1210D】Konrad and Company Evaluation(vector,图论)

    题意:有i个人,m对两两之间的关系,第i个人初始的薪水为i,有q次操作,第i次操作会把v[i]号的薪水提升成n+i 如果两个人之间存在关系,薪水高的会向薪水低的炫耀 定义u,v,w为一个三元组,当u向 ...