轻松理解Redux原理及工作流程

Redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其简单易学体积小在短时间内成为最热门的前端架构。

本文中我将用通俗易懂的方式讲述Redux的原理和工作流程

结构图

React组件（或其他使用Redux的组件，这里用react组件来进行举例）和Redux的关系

各部分的身份

我将会把这个过程比拟成图书馆的一个流程来帮助理解。

  • Action Creator（具体借书的表达）

    想借书的人向图书馆管理员说明要借的书的那句话。
  • Store（图书馆管理员）

    负责整个图书馆的管理。是Redux的核心
  • Reducers（图书馆管理员的小本本）

    管理员需要借助Reducer（图书馆管理员的小本本）来记录。
  • React Component（借书的人 ）

    需要借书的人

工作流程

借书的人（ReactComponent）说了一句话（Action Creator）向图书馆管理员（Store）借一本书，可是图书馆管理员年纪大了啊记不住啊，便掏出了自己的小本本（Reducers）。看了看知道了那本书有没有，在哪，怎么样。这样一来管理员就拿到了这本书，再把这本书交给了借书人。

翻译过来就是：

组件想要获取State， 用ActionCreator创建了一个请求交给Store,Store借助Reducer确认了该State的状态，Reducer返回给Store一个结果，Store再把这个State转给组件。

轻松理解Redux原理及工作流程的更多相关文章

  1. 第2章 rsync算法原理和工作流程分析

    本文通过示例详细分析rsync算法原理和rsync的工作流程,是对rsync官方技术报告和官方推荐文章的解释. 以下是本文的姊妹篇: 1.rsync(一):基本命令和用法 2.rsync(二):ino ...

  2. rsync算法原理和工作流程分析

    本文通过示例详细分析rsync算法原理和rsync的工作流程,是对rsync官方技术报告和官方推荐文章的解释.本文不会介绍如何使用rsync命令(见rsync基本用法),而是详细解释它如何实现高效的增 ...

  3. rsync（三）算法原理和工作流程分析

    在开始分析算法原理之前,简单说明下rsync的增量传输功能. 假设待传输文件为A,如果目标路径下没有文件A,则rsync会直接传输文件A,如果目标路径下已存在文件A,则发送端视情况决定是否要传输文件A ...

  4. 【Linux高级驱动】触摸屏工作原理与工作流程

    触摸屏工作原理 触摸屏工作流程 @成鹏致远 (blogs:http://lcw.cnblogs.com) (email:wwwlllll@126.com) ) From WizNote

  5. 漫谈Github与开源，Git介绍以及Git的思想和基本工作原理 Git工作流程

    漫谈Github与开源 文字亮点: 为什么这些优秀的工程师会开源自己的项目? 因为开源是一种精神. 无数的软件开发者苦心积虑保护自己的代码不被破解,而还是被聪明绝顶的脚本小子破解了,但破解无数软件的脚 ...

  6. springmvc 运行原理 Spring ioc的实现原理 Mybatis工作流程 spring AOP实现原理

    SpringMVC的工作原理图: SpringMVC流程 . 用户发送请求至前端控制器DispatcherServlet. . DispatcherServlet收到请求调用HandlerMappin ...

  7. Struts2的工作原理及工作流程

    众所周知,Struts2是个非常优秀的开源框架,我们能用Struts2框架进行开发,同时能 快速搭建好一个Struts2框架,但我们是否能把Struts2框架的工作原理用语言表达清楚,你表达的原理不需 ...

  8. 【关于selenium自动化中，Webdriver的原理以及工作流程】

    原文地址:https://www.cnblogs.com/imyalost/p/7242747.html#4109245 作者:老 张 1.关于Webdriver 设计模式:按照Server-Clie ...

  9. 《面试经典系列》- SpringMVC原理及工作流程

    前言 SpringMVC 作为 MVC 的开源框架,现在依旧是不少项目使用的重点框架.SpringMVC = Struts2 + Spring,SpringMVC就相当于 Struts2 + Spri ...

随机推荐

  1. MongoDB C#驱动给内嵌list添加数据

    Fc fc = new Fc() {}; var temp = Builders<MModel>.Filter.Where(m=>m.id== "882d4d22-ff70 ...

  2. 2017-2018-2 20165206 实验二《Java面向对象程序设计》实验报告

    2017-2018-2 20165206 实验二<Java面向对象程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:韩啸 学号:20165206 指导教 ...

  3. WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable Exception in thread "main" java.io.IOException: No FileSystem for sc F

    1.执行脚本程序报如下所示的错误: [hadoop@slaver1 script_hadoop]$ hadoop jar web_click_mr_hive.jar com.bie.hive.mr.C ...

  4. Linux系统监控命令及定位Java线程

    1.PID.TID的区分 uid是user id,即用户id,root用户的uid是0,0为最高权限,gid是group id,用户组id,使用 id 命令可以很简单的通过用户名查看UID.GID:~ ...

  5. virtualenv and virtualenvwrapper

    virtualenv 1.下载virtualenv工具 通过物理环境的pip工具安装  清华 国内 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/ ...

  6. python全栈开发day75-用户注册页面ajax实现，用户头像上传、预览、展示

    一.昨日内容回顾 1. 内容回顾 1. BBS项目登录 1. 登录用form组件和auth模块 1. form组件做校验很方便 2. auth模块 - authenticate(username=xx ...

  7. python基础——循环（for,while,break,continue）

    for while . break:退出循环 continue:退出本次循环 例子 for i range(0,101,2): print(i) --------------------------- ...

  8. sparkStreaming消费kafka-1.0.1方式：direct方式（存储offset到zookeeper）

    版本声明: kafka:1.0.1 spark:2.1.0 注意:在使用过程中可能会出现servlet版本不兼容的问题,因此在导入maven的pom文件的时候,需要做适当的排除操作 <?xml ...

  9. Codeforces 542E Playing on Graph 其他

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF542E.html 题目传送门 - CF542E 题目传送门 - 51Nod1481 题意 有一幅无向图,它有 ...

  10. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第十三集之Redis的单机版搭建】

    (转载其他博客的安装步骤,截图是自己的) 1, 第一步:安装gcc编译环境 yum install gcc-c++ 第二步:把redis的源码上传到linux服务器. 第三步:解压缩. tar -zx ...