一、执行流程

全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==》redux就是这种解决方案:redux只有一个作用,就是为了实现组件之间的信息交互。

1.执行createStore

  • 创建一个容器store来用来管理公用的状态信息
  • 创建一个事件池,用来存储一些方法(方法一般都是用来通知某个组件重新渲染的)
  • 当容器中的状态改变,会自动通知事件池中的方法依次执行

2.基于store.getState可以获取容器中存储的状态信息(拿到状态信息就可以做数据绑定等操作了)

3.我们可以基于store.subscribe向事件池中追加方法(也可以移除事件池中的方法)

4.修改容器中的状态信息

  • 首先雇一个管理员reducer,它就是用来修改容器中状态的
  • 当我们在组件中进行某些操作想要修改状态信息的时候,我们首先dispatch派发一个任务给reducer,并且告诉reducer如何去修改状态信息

公共状态信息都是reducer去改的,reducer记录了所有修改状态的行为方式,我们以后想要知道怎么改的状态,只要看reducer即可。

  • redux:不局限于任何框架(vue/react/angular/jquery...)
  • react-redux:把redux进一步封装,专门给react框架开发的(操作起来更简洁)
  • vuex:类似于redux的操作思想,专门为vue框架定制的
  • dva:把redux/react-redux进一步封装,操作更简洁
  • mobx:和redux不完全一致,也是用来管控公共状态的,只不过操作起来更加简单而已

画一张简易流程图

2.具体代码

  1. App.js
  2.  
  3. import {createStore} from 'redux'
  4.  
  5. /**
  6. * 创建redux容器用力啊管理公共的状态信息
  7. * 1.创建容器的时候其实已经准备好了管理员reducer了
  8. * 2.createStore(reducer):相当于创建一个容器并雇佣了一个管理员reducer
  9. * 3.创建出来的store存在几个属性:getState/dispatch/subscribe
  10. */
  11.  
  12. let store = createStore(reducer);
  13. window.store = store; //把创建的容器挂载到全局下,保证每一个子组件都可以获取到store,从而执行一些其它的操作(当然也可以基于属性)
  14.  
  15. //reducer管理员是一个方法:reducer方法是在dispatch派发的时候执行的
  16. //state:现有store容器中的状态信息(如果store中没有,我们给一个初始值)
  17. //action: 告诉reduce如何去修改状态都在action中(它是一个对象,对象中固定的有type属性:派发任务的行为标识,reducer就是根据不同的行为标识来修改状态信息的)
  18. function reducer(state = {
  19. n: 0,
  20. m: 0
  21. }, action) {
  22. //reducer就是根据不同的行为标识来修改状态信息的
  23. switch (action.type) {
  24. case 'support': state.n = state.n+1;break;
  25. case 'against': state.m = state.m+1;break;
  26. }
  27. return state; //return的是什么,就会把store中的状态改成什么
  28. }
  29.  
  30. <Vote></Vote> //调用
  31.  
  32. vote.js
  33. import React from 'react';
  34. import VoteHeader from './voteHeader.js'
  35. import VoteBody from './voteBody.js'
  36. import VoteFooter from './voteFooter.js'
  37. class Vote extends React.Component{
  38. constructor(){
  39. super()
  40. }
  41. render() {
  42. return (
  43. <div>
  44. <VoteBody></VoteBody>
  45. <VoteFooter></VoteFooter>
  46. </div>
  47. )
  48. }
  49. }
  50. export default Vote;
  51.  
  52. voteBody.js
  53. import React from 'react';
  54. class VoteBody extends React.Component{
  55. constructor(){
  56. super()
  57. }
  58. componentDidMount() {
  59. //通过subscribe追加事件,进行强制更新
  60. window.store.subscribe(()=>{
  61. this.forceUpdate();
  62. })
  63. }
  64. render() {
  65. //获取状态的改变
  66. let {n, m} = window.store.getState();
  67. return (
  68. <div>
  69. <div>赞成{n}票</div>
  70. <div>反对{m}票</div>
  71. </div>
  72. )
  73. }
  74. }
  75. export default VoteBody;
  76.  
  77. voteFooter.js
  78. import React from 'react';
  79. class VoteFooter extends React.Component{
  80. constructor(){
  81. super()
  82. }
  83. render() {
  84. let store = window.store;
  85. return (
  86. <div>
  87. //通过dispatch通知reducer根据不同的标示修改不同的状态
  88. <button onClick={e => store.dispatch({type: 'support'})}>赞成</button>
  89. <button onClick={e => store.dispatch({type: 'against'})}>反对</button>
  90. </div>
  91. )
  92. }
  93. }
  94. export default VoteFooter;

redux基础概念及执行流程详解的更多相关文章

  1. git概念及工作流程详解

    git概念及工作流程详解 既然我们已经把gitlab安装完毕[当然这是非必要条件],我们就可以使用git来管理自己的项目了,前文也多多少少提及到git的基本命令,本文就先简单对比下SVN与git的区别 ...

  2. Spring 框架基础(06):Mvc架构模式简介,执行流程详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.SpringMvc框架简介 1.Mvc设计理念 MVC是一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集 ...

  3. Spark SQL底层执行流程详解

    本文目录 一.Apache Spark 二.Spark SQL发展历程 三.Spark SQL底层执行原理 四.Catalyst 的两大优化 一.Apache Spark Apache Spark是用 ...

  4. android invalidate 执行流程详解

    invalidate()函数的主要作用是请求View树进行重绘,该函数可以由应用程序调用,或者由系统函数间接 调用,例如setEnable(), setSelected(), setVisiblity ...

  5. springmvc的执行流程详解

    1.什么是MVC MVC是Model View Controller的缩写,它是一个设计模式 2.springmvc执行流程详细介绍 第一步:发起请求到前端控制器(DispatcherServlet) ...

  6. AngularJS执行流程详解

    一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库, ...

  7. AngularJS执行流程详解(转)

    一.启动阶段 大家应该都知道,当浏览器加载一个HTML页面时,它会将HMTL页面先解析成DOM树,然后逐个加载DOM树中的每一个元素节点.我们可以把AngularJS当做一个类似jQuery的js库, ...

  8. 【C# 基础概念】Unicode编码详解

    Unicode定义:Unicode(统一码.万国码.单一码)是计算机科学领域里的一项业界标准,包括字符集.编码方案等.Unicode 是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字 ...

  9. 【C#基础概念】枚举 (enum详解)

    我们重点来讲解 简单枚举和标志枚举的用法和区别 继承 Object-> ValueType ->Enum Object-> ValueType ->struct 包括int f ...

随机推荐

  1. CodeForces 429B Working out DP

    E - Working out Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Su ...

  2. docker实战部署Javaweb项目

    一.部署环境说明 docker服务版本:version 18.09.0nginx服务版本:version: nginx/1.15.10redis服务版本:version: redis/5.0.3tom ...

  3. zabbix-agent TIME_WAIT 过多(转)

    一.系统环境 操作系统: Centos 6.4 64bit zabbix-agent 版本: Zabbix agent v2.2.7 (revision 50148) (24 October 2014 ...

  4. AVR单片机教程——示波器

    本文隶属于AVR单片机教程系列.   在用DAC做了一个稍大的项目之后,我们来拿ADC开开刀.在本讲中,我们将了解0.96寸OLED屏,移植著名的U8g2库到我们的开发板上,学习在屏幕上画直线的算法, ...

  5. java开发JSP+Servlet+bootstrap开发电影院购票系统 源码

    基于JSP+Servlet+bootstrap开发电影院购票系统:开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+Mysql数据库 程序要求:电影院订票系统 用 ...

  6. 通过HTML和CSS1:1还原风暴英雄官方网站

    <!--HTML代码--> <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. 异常 lock buffer failed for format 0x23

    02-11 21:21:45.669625 14804 14815 W Monkey : // java.lang.RuntimeException: lock buffer failed for f ...

  8. mysql数据库批量执行sql文件对数据库进行操作【windows版本】

    起因: 因工作需要,在本机测试环境升级mysql数据库,需逐条执行mysql数据库的sql文件对数据库进行升级,因此找了些关于mysql的文章,对批量升级数据库所需的sql文件进行升级. 整理思路: ...

  9. 微软帮助类SqlHelper

    using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collect ...

  10. c++输入输出,保留几位小数

    #include <iomanip> //头文件 //第一种写法 cout<<setiosflags(ios::); //第二种写法 cout.setf(ios::fixed) ...