数据流 in redux
前不久用react和react-router写了个单页面应用,但写完后总感觉还欠缺点什么,组件间的状态和数据相对较为独立,而且兄弟组件间的通信很不方便。然后才了解到,在react应用中,可以存在一个负责整合数据流向的框架,于是就选择了redux.
根据我的理解下面说一下redux的思想:
redux由三个部分组成,即store,reducer以及action,直观一点,你可以把store理解为数据库,reducer是事件处理函数,action是触发事件。为什么可以这么理解呢,因为整个redux的大致逻辑是这样的:
1 dispatch(action),即触发action,(事件发生)
2 reducer根据当前所触发action执行相对应的函数,更新state,(执行事件处理函数,更新数据库数据)
3 store的state会为应用所获取,像数据库一样
当然可能并不是那么契合,但大致的可以这么理解。现在我们再仔细的看一看redux的数据流。
1 dispatch的action会被reducer捕获到,其实是action先被传送至store,再由store交付给reducer的,因为dispatch是store的方法,action通过回调到达的store,而之前我们在创建store的时候使用了这样的声明 var store = createStore(reducer),使得store与reducer建立了某种联系,自然的,reducer能够接收到触发的action。
2 上面是redux内部数据流的实现,但是redux与应用之间的数据流动是怎么建立起来的呢?因为一般来说,是由应用的视图触发action,然后redux的reducer根据接收到的action执行相应的处理函数更新store的state,而state又是作为数据来源与应用绑定的,所以store的state一更新,应用视图也会同步刷新。所以这里的问题是,应用是如何获得dispatch action的能力以及来自store的数据的呢?这个就需要借助react-redux的Provider以及connect组件了。
通过Provider组件为应用组件再加一层外壳,并传入整个应用的store。


todo项目,说明整个项目的核心思想
redux的数据流思想大致如此,但这只是我自己的理解,可能会有所纰漏。
看了redux官方文档之后,照着葫芦画瓢也实现了一个todo小应用。
整个应用的编写思路其实不外乎上面所谈及的那些。
但是需要注意的是,上面截图中的第一条todo其实是通过异步添加上去的,然而dispatch只能触发同步的action,即传递普通的action对象,因为这样我们的action才能被reducer所接收到并触发相对应的处理函数。所以,如果需要触发异步的action的话,常规的方法是不行了的,我们需要使用点小技巧。这里又涉及到redux中间件(middleware)的概念了。简单介绍下,所谓中间件,就是在action被触发以及还没被reducer接收到之间这段时间所执行的一段函数,其内部封装有dispatch方法。中间件的存在是dispatch扩展的唯一标准方式。
我们想要使用中间件的话,需要借助applyMiddleware方法,它能够使中间件与store建立某种联系,使得store的dispatch和getState方法传入中间件。
说回我们之前所说的异步action,异步请求的实现我们可以借助于redux-thunk中间件,这个中间件会去拦截异步action,因为一般情况下异步action是action创建函数所返回的一个函数,所以redux-thunk中间件会替我们去执行这个函数。执行的最后,一般会dispatch普通的action对象,reducer捕获到此action对象,做出相应。
这是我们的异步action创建函数,会返回一个异步函数
//异步action
export function asyncAction(){
return function(dispatch, getState){
setTimeout(function(){
dispatch(addTodo("2秒钟过去啦!你还没添加新的任务,我来帮你添加一个吧!"))
},)
}
};
然后我们dispatch它
dispatch(asyncAction());
因为返回的是异步action对象(函数),会被redux-thunk拦截并执行,执行的最后dispatch一个普通的action事件,成功添加一条todo。
完整的代码在这里 https://github.com/JerelLin/redux-todo
睡觉
数据流 in redux的更多相关文章
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- 深入理解Redux
前面的话 Redux是Flux思想的另一种实现方式.Flux是和React同时面世的.React用来替代jQuery,Flux用来替换Backbone.js等MVC框架.在MVC的世界里,React相 ...
- redux 简介
概述 Redux 本身是个极其简单的状态管理框架, 它的简单体现在概念少, 流程明确. 但是, 正是因为简单, 使用上没有强制的约束, 所以如果用不好, 反而会让状态管理更加混乱. 我觉得, 用好 R ...
- Redux学习笔记-基础知识
Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...
- redux和mobx比较(二)
Redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 三大核心 在 Redux 中,最为核心的概念就是 action .reducer.store 以及 state,那 ...
- Redux使用
思想 应用中所有的state都以一个对象树的形式储存在一个单一的store中.唯一能改变state的办法是触发action,一个描述发生什么的对象.为了描述action如何改变state树,需要编写r ...
- 状态管理之 Flux、Redux、Vuex、MobX(概念篇)
本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...
- Redux 架构理解
Redux 是一种前端“架构模式”,是 Flux 架构的一种变种,用来提供可预测的状态管理.虽然经常和 React 一起被提及,但是 Redux 却不仅仅只能用于 React,还可以将其运用到其他前端 ...
随机推荐
- C# 内嵌其他程序到自己程序
写一xxx聊天机器人啊什么的可能会用到这种技术.比如把QQ窗体嵌入自己的winform中其实很简单,调用两个API函数即可. [DllImport("User32.dll ", E ...
- iOS tableview删除多余的空cell
self.tableview.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 加一句这个,然后给tableview一个背景色, ...
- apache2.2 做后端,增加真实ip到日志中
apache2.2使用mod_remoteip模块 一.安装 wget https://github.com/ttkzw/mod_remoteip-httpd22/raw/master/mod_rem ...
- 一起来做chrome扩展《本地存储localStorage》
chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...
- Spring @Autowired注解在utils静态工具类
[转] 使用场景:在一个静态方法中,如何使用以下注入: @Autowired private ItemMapper itemMapper; @Component public class TestUt ...
- Java 获取汉字拼音的方法
package lius.util; import java.io.Serializable; import java.util.ArrayList; public class JString ...
- css设置背景图片
background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...
- 纯手写SpringMVC架构,用注解实现springmvc过程
1.第一步,首先搭建如下架构,其中,annotation中放置自己编写的注解,主要包括service controller qualifier RequestMapping 第二步:完成对应的anno ...
- 我的MySQL整理
MySql unique的实现原理简析 MYSQL操作 MySql数据类型(转) MySql数据类型 MySql和CSV MySql超新手入门(很好的Mysql学习教材) MySql加锁处理分析 My ...
- 从Swift3的标准库协议看面向协议编程(一)
Swift中,大量内置类如Dictionary,Array,Range,String都使用了协议 先看看Hashable 哈希表是一种基础的数据结构.,Swift中字典具有以下特点:字典由两种范型类型 ...