一、执行流程

全局有一个公共的容器(所有组件都可以操作),我们可以在某个组件中把全局容器中的信息进行修改,而只要全局信息修改,就可以通知所有用到该信息的组件重新渲染(类似于发布订阅)==》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. rm -f 后如何恢复

    前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库. ...

  2. FastDFS 配置文件 tracker.conf

    FastDFS 版本5.05 配置文件分为三部分   控制器:tracker.conf存储器:storage.conf 客户端:client.conf 文件位置:/etc/fdfs 基本配置(基础配置 ...

  3. 杭电-------2046骨牌铺方格(C语言写)

    #include<stdio.h> ] = { }; long long recrusion(int n) { || a[n]>) { return a[n]; } ) + recr ...

  4. 【5min+】 设计模式的迷惑?Provider vs Factory

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  5. 显示二维码-智能TFT模块

    应用范例: 使用 TOPWAY Smart LCD (HMT050CC-C) 显示二维码 第一步 建立工程 ① 开 Editor 软件, 点击菜单栏建立新工程File --> New Proje ...

  6. #《Essential C++》读书笔记# 第四章 基于对象的编程风格

    基础知识 Class的定义由两部分组成:class的声明,以及紧接在声明之后的主体.主体部分由一对大括号括住,并以分号结尾.主体内的两个关键字public和private,用来标示每个块的" ...

  7. day16 匿名函数

    # 匿名函数# 函数名 = lambda 参数1,(参数2,....) : 返回值 [注意:匿名函数不允许换行]# 匿名函数返回值和正常函数一样可以是任意数据类型# def add(x,y):# re ...

  8. fatal: HttpRequestException encountered

    报错:fatal: HttpRequestException encountered 解决方法 Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行. ...

  9. CSRF防护

    CSRF防护 (待完善...)

  10. Gin框架之参数绑定

    为了能够更方便的获取请求相关参数,提高开发效率,我们可以基于请求的Content-Type识别请求数据类型并利用反射机制自动提取请求中QueryString.form表单.JSON.XML等参数到结构 ...