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. C语言博客作业08

    C语言I博客作业08](https://www.cnblogs.com/490-85-00-58-/p/11863312.html) 问题 回答 这个作业属于那个课程 C语言程序设计II 这个作业要求 ...

  2. MyEclispe启动Tomcat7时出现错误The servlets named [LoginServlet] and [com.liu.control.LoginServlet] are both

    刚开始尝试写Servlet代码,第一天就碰到这个错误,在网上找了很多资料才找到解决办法,在此记录一下. org.apache.catalina.LifecycleException: Failed t ...

  3. JQuery基础之获取和设置标签内容

    JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...

  4. .NETCore 访问国产达梦数据库

    前言 武汉达梦数据库有限公司成立于2000年,为中国电子信息产业集团(CEC)旗下基础软件企业,专业从事数据库管理系统的研发.销售与服务,同时可为用户提供大数据平台架构咨询.数据技术方案规划.产品部署 ...

  5. EasyUI整合SpringBoot,Spring Data对数据的分页操作

    EasyUI的用法可以看中文官网,看插件是如何使用的 EasyUI中文官网 前端页面 <table id="dg" title="My Users" cl ...

  6. Apache + WordPress 从 0 搭建

    引言 又到周末了,周末小编一般不更新系列文章,原因嘛是因为要攒稿子,年底工作比较忙,不攒点稿子是要断更的:( 所以周末一般聊点简单轻松加愉快的东西,小编现在的博客站是由 HEXO 进行搭建的,最近随着 ...

  7. 基于centos7.3 redhat7.3安装LAMP(php7.0 php7.1)生产环境实践

  8. unity3d 动态添加地面贴图 草地

    TerrainData.splatPrototypes = ]{ new SplatPrototype() { texture=Caodi, //Texture2D的贴图 normalMap=null ...

  9. 玩转摄像头之 基于SDRAM缓冲 USB2.0视频采集系统 MT9T001、MT9P031 演示 展示

    玩转摄像头之  基于SDRAM缓冲 USB视频采集系统  MT9T001.MT9P031 最新设计的系统: 核心板(FPGA+SDRAM)+底板(68013+DVP)+sensor 先看图 核心板 正 ...

  10. 关注图像采集视频传输之USB3.0 应用

    参考文献 百度文库 http://baike.baidu.com/link?url=82OyhoL1AsNaT35CvscmeZqHjlggtFw-Cez2qYwjLHNXGhXfv38pUlsIJB ...