数据流 in redux

吐槽

Facebook全家桶真是够了,从react到react-router再到redux,看的我成就感满满啊,然后才告诉我,这一切都还只是个开始。好咯。用别人框架的人我还能说什么。

对redux的理解(数据流分析)

之前用学过的react和react-router写了个单页面应用,但写完后总感觉还欠缺点什么,怎么说呢,就是感觉在数据流的控制上被框架约束的厉害,很不自由,比如兄弟组件间的通信就很不方便。然后才了解到,还需要一个能全局控制整个应用数据流的框架,就是框架的框架,然后就选择了redux,因为它在github上面星星比较多。

根据我的理解下面说一下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。

connect组件负责链接store与应用。其中select函数会接收到来自store的state,在这里可以对state进行相应的预处理再返回应用所需state,state会连同store的dispatch方法以属性方式传入App组件即应用组件。

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秒钟过去啦!你还没添加新的任务,我来帮你添加一个吧!"))
        },2000)
    }
};

然后我们dispatch它

dispatch(asyncAction());

因为返回的是异步action对象(函数),会被redux-thunk拦截并执行,执行的最后dispatch一个普通的action事件,成功添加一条todo。

完整的代码在这里 https://github.com/JerelLin/redux-todo

结尾

睡觉

时间: 2024-10-29 10:46:25

数据流 in redux的相关文章

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.) 余博伦· 2 个月前 原文链接:A Study Plan To Cure JavaScript Fatigue 作者:Sacha Greif 和大家一样,最近我也看了Jose Aguinaga写的How it feels to learn JavaScript in 2016. 显然这篇文章击中了人们的痛处.它在Hacker News上排了不止一次第一.同样也是/r/javascript上最火的一篇,在Med

Redux学习笔记-基础知识

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "

一个简单的例子让你了解React-Redux

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 一个简单的例子让你了解React-Redux - 小平果的欢乐谷 - 博客频道 - CSDN.NET 小平果的欢乐谷 你的到来会让我很意外,谢谢光临! 目录视图 摘要视图 订阅 [活动]2017 CSDN博客专栏评选 &nbsp [5月书讯]流畅的Python,终于等

react 面试指南

------------恢复内容开始------------ 什么是声明式编程 声明式编程是一种编程范式,它关注的是你要做什么,而不是如何做.它表达逻辑而不显式地定义步骤.这意味着我们需要根据逻辑的计算来声明要显示的组件.它没有描述控制流步骤.声明式编程的例子有HTML.SQL等. HTML file // HTML <div> <p>Declarative Programming</p> </div> SQL file select * from stud

Redux学习笔记------数据流

严格的单向数据流-----核心 单向的数据流使得应用中的数据遵循相同的生命周期 redux的生命周期 1.调用 store.dispatch(action). 2.Redux store 调用传入的 reducer 函数. Store 会把两个参数传入 reducer: 当前的 state 树和 action. 3.根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树. combinReducer() let todoApp = combineReducers(

在React中使用Redux数据流

问题:数据流是什么呢?为什么要用数据流? 答案:1.数据流是我们的行为与相应的抽象 2.使用数据流帮助我们明确了行为的对应的响应 问题: React与数据流的关系 1.React是纯 V 层的前端框架.需要数据流进行支撑 主流的数据流框架/为什么需要使用Redux Flux / reFulx / Redux 原文地址:https://www.cnblogs.com/chen-cheng/p/9916405.html

redux数据流

redux使用 reducer 来进行事件的处理,reducer 是一个纯函数,这个函数被表述为 (previousState, action) => newState ,它根据应用的状态和当前的 action 推导出新的 state.Redux 中有多个 reducer,每个 reducer 负责维护应用整体 state 树中的某一部分,多个 reducer 可以通过 combineReducers 方法合成一个根reducer,这个根reducer负责维护完整的 state. 当一个 act

应用数据流状态管理框架Redux简介、核心概念及工作流

前几天给大家谈了谈React 不过它只是一个侧重于UI的框架 只能算作是MVC中的V(View视图) 而且只是DOM的一个抽象层,不是Web应用完整解决方案 如果仅仅用它构建大型项目 你会非常的吃力 简介 14年,Facebook提出Flux架构意图解决这个问题 15年,Dan Abramov将 Flux 与函数式编程相结合,创造了Redux,由于简单易学就开始流行起来 16年,Dan Abramov被facebook挖走了 Redux体积很小,如果删掉源码的空行和注释,连500行代码都不到 别

从Flux到Redux详解单项数据流

从Flux到Redux是状态管理工具的演变过程,但两者还是有细微的区别的.但是最核心的都还是观察者模式的应用. 一.Flux 1. Flux的处理逻辑 通俗来讲,应用的状态被放到了store中,组件是store状态的一个映射,用户通过事件触发action,再通过Dispatcher根据不同的actionType进行分发,并做不同的逻辑处理,但核心都是通过直接改变store的状态,再触发emitChange间接改变组件中的数据.(后面会上代码) 从代码层面来讲,store中的数据通过EventEm