Redux概述

是什么:Redux是管理状态的容器,提供可预测的状态管理。

怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多。通过分发action触发reduce来处理state。 特点:

  1. 单一数据源。

    整个应用的state是唯一,state的更新引发应用或者组件的更新,在整个程序运行期间,state有且仅有一个。

  1. State只读

    唯一改变state的方法是触发action,在reduce中 重置 state的属性, 3. 纯函数执行修改

    相同的输入对应相同的输出

基础信息

action

action是把数据从应用传到store的有限载荷。其本质上的一个js对象。按照约定,action对象中应该有一个type 字段来表示将要执行的动作,其他属性可以自由定义。 在整个数据流中,action扮演的是一个消息通知者的角色,简单的说就是告知store哪些‘事件’被触发了。redux可以通过reduce根据不同的action来对state做不同的操作。

Reducer

如果说action是‘事件’的话,那么reducer就是‘事件处理器’。 在Redux应用中,所有的state都保存在唯一的对象中。

reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。

永远不要在 reducer 里做这些操作:

修改传入参数;

执行有副作用的操作,如 API 请求和路由跳转;

调用非纯函数,如 Date.now() 或 Math.random()。

注意

1.不要修改state。使用新的对象,然后将原有state值拷贝到新对象而不是直接在老对象上更新属性,js对象都是引用,如果在原有state上更新,可能会导致Redux无法正确完成state的diff比较。

2. 默认情况下返回原有state

其他:

使用combineReducers() 来组合reducer。

store

如果说action是‘事件’,reducer是‘事件处理器’,那么store就是全局的事件管理对象。 每个Redux应用都应该只有 一个单一的store。但需要拆分数据处理逻辑时,应该使用Reducer组合而不是创建多个store。

Store主要有以下职责:

  • 维持应用的 state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

通过createStore()方法创建store实例,该方法接受两个参数:第一个是reducer,就是action的处理函数,第二个是可选参数,用来设置state的初始状态。

数据流

所有Redux应用中,数据的流向是单向的,具体可以从以下几点来理解:

  1. 分发action
    通过调用store.dispatch(action)来分发action。我们可以在任何地方调用此方法来分发action。
  2. 处理action
    通过store分发的action,被创建store实例时使用的reducer处理。
  3. 合并state

多个Reducer共同处理action后,把state合并成一个新的state对象。 4. 返回新state

最终返回一个新的state对象,Redux应用可以使用该state做其他事情了。

[参考redux官方文档](http://www.redux.org.cn/)

Redux学习笔记-基础知识的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. three.js学习笔记--基础知识

    基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...

  3. SQLServer学习笔记<>.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数

    Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下:   ...

  4. Java Script 学习笔记 -- 基础知识

    Java script 概述 java Script 的简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为 ...

  5. java虚拟机JVM学习笔记-基础知识

    最近使用开发的过程中出现了一个小问题,顺便记录一下原因和方法--java虚拟机 媒介:JVM是每一位从事Java开发工程师必须翻越的一座大山! JVM(Java Virtual Machine)JRE ...

  6. hadoop学习笔记——基础知识及安装

    1.核心 HDFS  分布式文件系统    主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操 ...

  7. php学习笔记——基础知识(2)

    9.PHP语句 if 语句 - 如果指定条件为真,则执行代码 if...else 语句 - 如果条件为 true,则执行代码:如果条件为 false,则执行另一端代码 if...else if.... ...

  8. php学习笔记——基础知识(1)

    1.PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 2.基础 PHP 语法 1)PHP 脚本可放置于文档中的任何位置. 2)PHP 脚本以 <?php 开头,以 ?> ...

  9. GO Lang学习笔记 - 基础知识

    Go lang Learn Note 标签(空格分隔): Go Go安装和Go目录 设置环境变量GOROOT和GOPATH,前者是go的安装目录,后者是开发工作目录.go get包只会将包下载到第一个 ...

随机推荐

  1. 原来部署好的WCF(可以调用),因为部署.net core,而安装了DotNetCore.2.0.5-WindowsHosting,导致现在WCF站点不可以。

    报错如下: 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面. 解决方法: 如果出现如下结果,则证明可以啦.

  2. Windows与linux添加用户命令

    Windows 查看当前存在用户: net user 查看当前用户组: net localgroup 添加用户(以添加用户test密码test1234为例): net user test test12 ...

  3. 正则基础之——NFA引擎匹配原理

    记录一下一篇很好的博文:https://blog.csdn.net/lxcnn/article/details/4304651

  4. linux curl post/put请求

    案列: -X: 请求方式 --header: 请求header -d: 请求的数据 最后跟上请求的地址 curl -X PUT --header 'Content-Type: application/ ...

  5. es xxx_by_query

    xxx_by_query包括_delete_by_query和_update_by_query,下面分开讲 _delete_by_query 相当于sql中的delete from a where . ...

  6. Git版本回退和撤销修改

    版本回退: 在实际工作中,我们会不断对文件进行修改,然后不断提交修改到版本库里,一旦你把文件改乱了,或者误删了文件,还可以从最近的一个commit恢复,然后继续工作,而不是把几个月的工作成果全部丢失. ...

  7. 同步FIFO学习

    在网上找的一个经典同步FIFO例子. 一.前言 FIFO (First-In-First-Out) 是一种先进先出的数据交互方式,在数字ASIC设计中常常被使用.FIFO按工作时钟域的不同又可以分为: ...

  8. XNA 中3D模型的显示

    XNA 中3D模型的显示: ModelMeshPart[] meshParts; Model start_model; Matrix[] dq_model_transforms; Matrix vie ...

  9. Ms SQL Server 游标嵌套 初始化数据

    --TRUNCATE TABLE TAB_ROLE_FUNC; --SELECT * FROM TAB_ROLE_FUNC; ), ; --外层游标 DECLARE CURSOR_ROLE CURSO ...

  10. BDD框架之Cucumber研究

    BDD框架之Cucumber研究 引用链接:http://kongqingyun123.blog.163.com/blog/static/6377283520134158437813/ Cucumbe ...