react将dom解耦,不用直接操作dom,使用了状态机制,当状态改变时视图就会相应更新。我们知道在react中,父组件可以将一些状态传递给子组件,让子组件的视图相应更新,这时我们会发现,只有有关联的组件才可以依次传递,那些没有父组件与子组件关系的组件,这些组件之间的某些状态是共享的,这时就需要redux了。

redux的主要设计思想:1)web应用是一个状态机,视图与状态是一一对应的   2)所有的状态都保存在一个对象里

redux包含两个步骤,发起Action和产生新state的reducer

Action的函数可以是自己写的一个请求后台数据的函数,也可以使用react-actions中的createAction,与后台无交互,只是传入更新的state

Reducer的函数接收Action传入的state,通过对state操作返回新的state,在需要该state的组件使用该reducer更新state

redux的设计思想之一就是所有的数据都在一个对象里,那么当reducer过于繁多时,就会导致代码难于维护,所以我们可以拆分成几个小的reducer,最后将这些reducer合并成大的reducer,redux提供了combineReducers函数可以将子reducer合并成一个state对象

关于redux的更多相关文章

  1. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  2. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  3. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. redux学习

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

  5. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  6. Redux初见

    说到redux可能我们都先知道了react,但我发现,关于react相关的学习资料很多,也有各种各样的种类,但是关于redux简单易懂的资料却比较少. 这里记录一下自己的学习理解,希望可以简洁易懂,入 ...

  7. react+redux教程(八)连接数据库的redux程序

    前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...

  8. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  9. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  10. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

随机推荐

  1. iOS--MJRefresh的使用 上拉刷新和下拉加载

    1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...

  2. MySQL多实例(二)

    一.多实例MySQL数据库原理 1.1:原理图 1.2:多实例原理(什么是多实例) 简单来说MySQL多实例就是在一台服务器上同时开启多个不用的服务端口(如:3306.3307),同时运行多个MySQ ...

  3. JSON 字符串转换为JavaScript 对象.JSON.parse()和JSON.stringify()

    使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象: var text = '{ "sites" : [' + '{ &qu ...

  4. .Net Core Nuget还原失败

    项目获取后发现所有项目的依赖项全部报黄.. 展开发现所有的Nuget包都没有引用.. 按错误窗口的提示使用解决方案上"Nuget包还原"来解决却没有任何进展.. 错误窗口报文 找不 ...

  5. 可调试Windows服务框架

    参考: Build A Windows Service Framework 新建ServiceFramework类库,项目中需引用: using System.Configuration.Instal ...

  6. Fiddler Web Debugger的下载和安装(图文详解)

    不多说,直接上干货! Fiddler是一个http协议调试代理工具,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点.调试web应用.修改请求的数据 ...

  7. 【译】Spark调优

    原文地址:http://spark.incubator.apache.org/docs/0.7.3/tuning.html 译文地址:http://www.oschina.net/translate/ ...

  8. Chapter 3 Phenomenon——16

    "Your X-rays look good," he said. "Does your head hurt? Edward said you hit it pretty ...

  9. tomcat启动(五)Catalina分析-service.init

    上篇写到StandardService.init() 这个方法做什么呢?一起来看看. 这个类也是实现了Lifecycle 如图.这个图中i表示Interface接口.如Lifecycle,Contai ...

  10. 一次tomcat数据乱码事件

    一次环境变量出错导致的tomcat数据乱码事件 1.1 事件起因 由于业务的调整,我们需要将在A服务器上的后台系统迁移到B服务器上的后台,我们选择在下班后进行迁移,因为那个时间点,后台系统已经几乎没有 ...