Redux学习及应用

一:Redux的来源?

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux是由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。redux设计的目标是创建一个状态管理库,来提供最简化 API,但同时做到行为的完全可预测,因此才得以实现日志打印,热加载,时间旅行,同构应用,录制和重放,而不需要任何开发参与。

二:为什么要使用Redux?

  1. 单向数据流中,同级组件无法进行数据通信
  2. 数据被合并到一个集中的位置:store,而且组件不能直接修改store中的数据,所以你总是知道状态来自哪里(store),以及允许哪一个唯一实体触发更新(action)到该状态。 可预测性

三:Redux的核心概念

  1. Store:保存数据的地方,你可以把它看成一个容器,整个应用只能有一个Store。
  2. State:Store对象包含所有数据,如果想得到某个时点的数据,就要对Store生成快照,这种时点的数据集合,就叫做State。
  3. Action:State的变化,会导致View的变化。但是,用户接触不到State,只能接触到View。所以,State的变化必须是View导致的。Action就是View发出的通知,表示State应该要发生变化了。
  4. Action Creator:View要发送多少种消息,就会有多少种Action。如果都手写,会很麻烦,所以我们定义一个函数来生成Action,这个函数就叫Action Creator。
  5. Reducer:Store收到Action以后,必须给出一个新的State,这样View才会发生变化。这种State的计算过程就叫做Reducer。Reducer是一个函数,它接受Action和当前State作为参数,返回一个新的State。
  6. dispatch:是View发出Action的唯一方法。

四:Redux的三大原则

  1. 单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,你可以把应用的 state 保存在本地,从而加快开发速度。此外,受益于单一的 state tree ,以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

  2.State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接修改 state,相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理,且严格按照一个接一个的顺序执行,因此不用担心 race condition 的出现。 Action 就是普通对象而已,因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

  3.使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers

Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如分页器。

Redux学习及应用的更多相关文章

  1. redux学习

    redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...

  2. React Redux学习笔记

    React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...

  3. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  4. redux学习总结

    redux学习总结 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !imp ...

  5. 【原】redux学习笔记

    上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...

  6. react与redux学习资料的整理

    **重点内容**React学习 1.新手入门可以访问react的官方网站,如果英语不是特别好的同学可以访问中文版的,具体链接http://reactjs.cn/react/index.html 首页有 ...

  7. Redux 学习(1) ----- Redux介绍

    Redux 有三个基本的原则: 1,单一状态树,redux 只使用一个javascript 对象来保存整个应用的状态. 状态树样式如下: const state = { count: 0 } 2,状态 ...

  8. Redux学习之解读applyMiddleware源码深入middleware工作机制

    随笔前言 在上一周的学习中,我们熟悉了如何通过redux去管理数据,而在这一节中,我们将一起深入到redux的知识中学习. 首先谈一谈为什么要用到middleware 我们知道在一个简单的数据流场景中 ...

  9. Redux学习day1

    01.React介绍 Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具.随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多 ...

随机推荐

  1. 饶有特色的 CSS3 展示横条.html

     

  2. 谁说微服务是Spring Cloud的独角戏?Service Mesh了解一下?

    Service Mesh 的概念自 2017 年初提出之后,受到了业界的广泛关注,作为微服务的下一代发展架构在社区迅速发酵,并且孵化出了诸如 Istio 等广受业界关注的面向于云原生 (Cloud N ...

  3. Web安全测试实战之测试HTTP方法

    一. Http方法测试 有些Web服务器默认情况下开放了一些不必要的HTTP方法(如DELETE.PUT.TRACE.MOVE.COPY),这样就增加了受攻击面. 测试方法: 1.打开webscara ...

  4. 机器学习python*(深度学习)核心技术实战

    Python实战及机器学习(深度学习)技术 一,时间地点:2020年01月08日-11日 北京(机房上课,每人一台电脑进行实际案例操作,赠送 U盘拷贝资料及课件和软件)二.课程目标:1.python基 ...

  5. Java修炼——插入排列,选择排列

    话不多说,直接上代码: package com.bjsxt.Array; import java.util.Arrays; public class TestSort { //选择排序 //插入排列 ...

  6. 第二节.NET两种交互模式:c/s和b/s

    1.什么是c/s           c指的是client(客户端),s指的是服务器模式,c/s是client/Server的缩写,客户端需要安装专业的客户端软件,如我们用的qq.酷狗音乐等客户端软件 ...

  7. 初次接触tensorflow

    要确保已经明白神经网络和卷积神经网络的原理.如果不明白,先学习参考资料1.tensorflow中有很多api,可以分成2大类.1类是比较低层的api(tf.train),叫TensorFlow Cor ...

  8. 关于OV7670摄像头的分辨率设置

    关于OV7670摄像头的分辨率设置最近一直在纠结如何把OV7670输出的图片分辨率缩小,以减少数据量来适应数据的传输,在网上看了好多也没有关于寄存器的具体设置,最终又读了几遍数据手册,加上网友们写的帖 ...

  9. 167. 两数之和 II - 输入有序数组

    给定一个已按照升序排列的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返回的下标值( ...

  10. 【Git】405- 分享:大牛总结的 Git 使用技巧

    作者:你喜欢吃青椒么 来源:juejin.im/post/5d157bf3f265da1bcc1954e6 前言 本文是参考廖雪峰老师的Git资料再加上我自己对Git的理解,记录我的Git学习历程,作 ...