美文网首页
Redux思想简述

Redux思想简述

作者: shengwenjia | 来源:发表于2017-07-31 16:14 被阅读0次

数据流是我们的行为和响应的抽象(例如用户的点击,以及对应页面的更新)

单向数据流有助于明确具体的行为和对应的响应,实现状态可预测。

React和数据流:

React是一个纯view层框架,需要数据流支撑,Flux太重太大,不适合使用,而redux简单高效

MVC随着项目的扩大,会使得结果变得非常不可预测,这对开发来说会是一个灾难。

Redux数据流:用户触发了UI(view)上的action,action将会被送到reducer这样的方法里面,然后reducer会更新store,页面的数据即state包含在store里面,是其一部分,决定了组件的渲染结果,state变化之后又在显现在view层上,进行用户的响应。

action是行为的抽象,描述具体的用户行为,是一个简单的js对象,reducer是响应的抽象,需要传入action和旧状态,返回新状态,即响应,即一个js纯函数。

mapStateToProps, mapDispatchToProps:由dispatch和state引起props对应的变化,都会被redux捕捉到,以此得到该有的响应。

上述这张图可以表明Redux是如何对数据状态流进行管理的:

UI代表页面,当页面发生改变时(例如用户点击页面触发单击事件等操作),就会引发action,action会被传送到reducer中,reducer会根据action的type(即具体是哪种操作)来决定执行哪个事件处理函数,这些事件处理函数会更新redux中的store,即更新了state,state一旦发生变化,就会触发render函数进行页面的再次渲染,即使得页面发生了改变,响应用户的行为。上述的一系列过程即redux对数据状态流的管理。

Redux与react连接:

相关文章

  • Redux思想简述

    数据流是我们的行为和响应的抽象(例如用户的点击,以及对应页面的更新) 单向数据流有助于明确具体的行为和对应的响应,...

  • Redux简述

    什么是 Redux? 官方解释:redux 是 js 应用的可预测状态的容器。 可以理解为全局数据状态管理工具(状...

  • 简述 Redux

    redux:解决数据传递问题,把所有数据放在store中传递。 1.基于react什么时候要用redux reac...

  • react + react-redux + iron-redux

    简述 搭建基于redux、react-redux、iron-redux的脚手架,此demo仅做个人练习使用。Hom...

  • redux一些事

    简述redux redux已经用的比较熟了,实际上redux并没有想象中那么复杂,就像redux官方文档说的没有黑...

  • react学习笔记-Redux入门(6)

    5-1、Redux概念简述 Redux = Reducer + Flux(2013官方推荐的数据存储插件)imag...

  • Redux从设计到源码

    Redux背后的设计思想 在讲设计思想前,先简单讲下Redux是什么?我们为什么要用Redux? Redux是什么...

  • redux 总结

    redux redux概念 Redux是JavaScript应用程序的可预测状态容器。 redux 设计思想 We...

  • 06.Redux入门

    Redux概念简述 Redux的工作流程 使用Antd实现TodoList页面布局 这里,我们新建一个项目1.cm...

  • redux-saga源码解读

    简述 redux-saga是用于维护redux异步操作的状态的一个中间件实现,其中reducer负责处理state...

网友评论

      本文标题:Redux思想简述

      本文链接:https://www.haomeiwen.com/subject/btsrlxtx.html