Redux学习笔记-基础知识

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "Helvetica Neue"; color: #404040 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Georgia; color: #737373 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #737373 }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 }
span.s1 { }
span.s2 { font: 12.0px Monaco; background-color: #fee9cc }
span.s3 { font: 13.0px "Helvetica Neue" }
span.s4 { background-color: #fee9cc }
ol.ol1 { list-style-type: decimal }
ul.ul1 { list-style-type: disc }

 

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/)

时间: 2024-10-10 09:05:11

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

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

1.核心 HDFS  分布式文件系统    主从结构,一个namenoe和多个datanode, 分别对应独立的物理机器 1) NameNode是主服务器,管理文件系统的命名空间和客户端对文件的访问操作.NameNode执行文件系统的命名空间操作,比如打开关闭重命名文件或者目录等,它也负责数据块到具体DataNode的映射 2)集群中的DataNode管理存储的数据.负责处理文件系统客户端的文件读写请求,并在NameNode的统一调度下进行数据块的创建删除和复制工作. 3)NameNode是所有

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

Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下:   同时往数据库表插入一些数据,用户后续对数据库的sql的练习.在这里有需要的可以下载相应的脚本进行数据库的初始化.我放到百度云上面,请戳 我:http://yun.baidu.com/share/link?shareid=3635107613&uk=2971209779,提供了<Sqlserver

设计模式学习笔记-基础知识篇

1. 设计模式的重要性 1.1 设计模式解决的是在软件过程中如何来实现具体的软件功能.实现同一个功能的方法有很多,哪个设计容易扩展,容易复用,松耦合,可维护?设计模式指导我们找到最优方案. 1.2 设计中往往会存在设计缺陷,这些缺陷包括: 僵化性:难以对软件进行改动,即使在功能上来看是很小的改动 脆弱性:在进行很小的改动时,可能导致很多地方出现问题 顽固性:要把系统中某些通用的功能分离出来的努力和风险非常巨大 粘滞性:当面临改动时,改动的方案有很多,一些会保持设计,一些会破坏设计,当采用保持设计

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

1.PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 2.基础 PHP 语法 1)PHP 脚本可放置于文档中的任何位置. 2)PHP 脚本以 <?php 开头,以 ?> 结尾. 3)PHP 文件的默认文件扩展名是 ".php". 4)PHP 文件通常包含 HTML 标签以及一些 PHP 脚本代码. 5)PHP 支持三种注释: // 这是单行注释 # 这也是单行注释 /* 这是多行注释块 它横跨了 多行 */ 6)PHP 语句以分号结尾(;).PHP 代码块

JavaScript学习笔记--基础知识

1. javaScript能做什么? (1)写入HTML输出 document.write("<h1>This is a heading</h1>"); 注意:只能在HTML输出中使用document.write.如果在文档加载后使用该方法,会覆盖整个文档. (2)对事件作出反应 <button type="button" onclick="alert('welcome!')">点击这里</button&

DNS与BIND学习笔记-基础知识及配置详解

转自 http://blog.chinaunix.net/uid-14825809-id-333591.html 标签:DNS 多线 智能 服务器 bind 一直想系统的学习和了解DNS的原理,包括看相关的rfc文件,一看和dns相关的rfc文件,妈呀,居然有86个之多.能看多少是多少吧.先把DNS的原理研究透彻了.在看rfc文件我想会事半功倍的:) 1. ICANN是干什么的?和他的一些相关资讯? ICANN全称是叫:Internet Corporation for Assigned Name

Validform 学习笔记---基础知识整理

面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也很方便.这篇文章就是针对我对validform的理解真理的一篇validform的使用文档.Validform官网 1.js和css的引用: 这里引用官网下载中的一下css: (文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的

正则表达式学习笔记——基础知识

一.正则表达式-简介 1. 概念 正则表达式,描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 2. 特点 (1) 灵活性.逻辑性和功能性非常的强: (2)可以迅速地用极简单的方式达到字符串的复杂控制. (3)对于刚接触的人来说,比较晦涩难懂. 由于正则表达式主要应用对象是文本,因此它在各种文本编辑器场合都有应用,小到著名编辑器EditPlus,大到Microsoft Word.Visual Studio等大型编辑器,都可

渗透学习笔记--基础篇--sql注入(字符型)

环境:dvwa1.7数据库:mysql前置知识:sql语句(Click me)      在进行sql注入前,我们先熟悉熟悉select语句.一.打开我们的sql终端 二.进入之后可以看到有mysql>我们输入sql语句,即可返回我们想要的结果,注意分号哟!我们使用的dvwa,在我们前几章设置的时候,会在数据库中生成一个dvwa的database:这里我们使用它来进行我们的select 语句:(1)使用dvwa数据库use dvwa;(2)在users表里查询用户名为'admin'的所有信息se