异步action和redux-thunk理解
异步action一般指的就是异步action创建函数
action创建函数分为同步action创建函数和异步action创建函数
同步action创建函数(最常见的):
function requestPosts(subreddit) {
return {
type: REQUEST_POSTS,
subreddit
}
}
异步action创建函数(如果利用了redux-thunk,也叫thunk action创建函数,通过使用指定的 middleware,action 创建函数除了返回 action 对象外还可以返回函数。这时,这个 action 创建函数就成为了 thunk):
// 来看一下我们写的第一个 thunk action 创建函数!
// 虽然内部操作不同,你可以像其它 action 创建函数 一样使用它:
// store.dispatch(fetchPosts('reactjs')) export function fetchPosts(subreddit) { // Thunk middleware 知道如何处理函数。
// 这里把 dispatch 方法通过参数的形式传给函数,
// 以此来让它自己也能 dispatch action。 return function (dispatch) { //redux-thunk使得可以dispatch该函数 // 首次 dispatch:更新应用的 state 来通知
// API 请求发起了。 dispatch(requestPosts(subreddit)) // thunk middleware 调用的函数可以有返回值,
// 它会被当作 dispatch 方法的返回值传递。 // 这个案例中,我们返回一个等待处理的 promise。
// 这并不是 redux middleware 所必须的,但这对于我们而言很方便。 return fetch(`http://www.subreddit.com/r/${subreddit}.json`)
.then(
response => response.json(),
// 不要使用 catch,因为会捕获
// 在 dispatch 和渲染中出现的任何错误,
// 导致 'Unexpected batch number' 错误。
// https://github.com/facebook/react/issues/6895
error => console.log('An error occurred.', error)
)
.then(json =>
// 可以多次 dispatch!
// 这里,使用 API 请求结果来更新应用的 state。 dispatch(receivePosts(subreddit, json))
)
}
}
通过使用redux-thunk中间件,使得可以dispacth一个函数,该函数被thunk中间件调用,且该函数的返回值会作为dispatch方法的返回值,该例中最后返回的是一个promise
store.dispatch(fetchPosts('reactjs')).then(() => console.log(store.getState()))
像 redux-thunk 或 redux-promise 这样支持异步的 middleware 都包装了 store 的 dispatch() 方法,以此来让你 dispatch 一些除了 action 以外的其他内容,例如:函数或者 Promise。
当 middleware 链中的最后一个 middleware 开始 dispatch action 时,这个 action 必须是一个普通对象。这是 同步式的 Redux 数据流 开始的地方(译注:这里应该是指,你可以使用任意多异步的 middleware 去做你想做的事情,但是需要使用普通对象作为最后一个被 dispatch 的 action ,来将处理流程带回同步方式)
异步action和redux-thunk理解的更多相关文章
- Redux 和 Redux thunk 理解
1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...
- redux学习日志:关于异步action
当我们在执行某个动作的时候,会直接dispatch(action),此时state会立即更新,但是如果这个动作是个异步的呢,我们要等结果出来了才能知道要更新什么样的state(比如ajax请求),那就 ...
- 【React全家桶入门之十三】Redux中间件与异步action
在上一篇中我们了解到,更新Redux中状态的流程是这种:action -> reducer -> new state. 文中也讲到.action是一个普通的javascript对象.red ...
- Redux学习笔记--异步Action和Middleware
异步Action 之前介绍的都是同步操作,Redux通过分发action处理state,所有的数据流都是同步的,如果需要一步的话怎么办? 最简单的方式就是使用同步的方式来异步,将原来同步时一个acti ...
- Redux 处理异步 Action
redux-promise-utils What redux-promise-utils 是一个基于 redux-thunk 和 redux-actions 的工具,符合 FSA 规范,方便开发者处理 ...
- Redux thunk中间件
redux-thunk https://github.com/reduxjs/redux-thunk Why Do I Need This? Thunks are the recommended mi ...
- redux-amrc:用更少的代码发起异步 action
很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...
- redux的理解
Redux 这里介绍下我对Redux的理解,不涉及如何使用Redux. Redux 官网介绍: A predictable state container for JavaScript apps.(一 ...
- ASP.NET MVC下的异步Action的定义和执行原理
一.基于线程池的请求处理ASP.NET通过线程池的机制处理并发的HTTP请求.一个Web应用内部维护着一个线程池,当探测到抵达的针对本应用的请求时,会从池中获取一个空闲的线程来处理该请求.当处理完毕, ...
随机推荐
- 在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)
'use strict' import axios from 'axios' // import qs from 'qs' import { Notification} from 'element-u ...
- 使用IO流将数据库中数据生成一个文件,结果使用Notepad++打开部分数据结尾出现NUL
场景描述: 项目中通过java代码中从数据库中查询一系列数据,对数据做相应处理,然后通过字符流将数据写如一个新生成的文件中,将该项目部署在linux服务器上,最后生成的文件拿到本地使用notepad+ ...
- ORACLE PL、SQL编程
PL(Procedural Language)过程化的编程语言,是在SQL的基础上增加的部分,如:变量的使用.流程控制等, 重点学习Oracle和MySQL创建存储过程及流程控制的异同. 一.存储过程 ...
- iOS开发系列-Block
概述 在iOS 4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调.这不免让我们想到在C函数中,我们可以定义一个指向函数的指针并且调用. #im ...
- docker linux基本操作
容器运行起来之后一些基本的工具还是要安装好: 这个工具的安装方式和linux是一样的,因为容器本身就是一个微linux系统 先安装 apt, 1 / apt-get update 安装了apt之后 可 ...
- Tomcat 在IE中下载rar文件直接以乱码方式打开解决方案
这几天一直很纳闷,在Tomcat部署的网站中的下载文件中,如果文件是rar类型的,一点击下载rar文件就直接打开,并且出现乱码,右键另存为浏览器也是默认为html格式,一直以为是浏览器IE的问题,后来 ...
- idea关联git后 Git上传项目提示Push rejected: Push to origin/master was rejected解决办法
当所有的东西都配好以后 就是不上数据 解决方案是在所属右键 点击Git BashHere后 输入:git pull origin master –allow-unrelated-historie ...
- sql delete语句
如果要删除数据库表中的记录,我们可以使用DELETE语句. DELETE语句的基本语法是: DELETE FROM <表名> WHERE ...; 例如,我们想删除students表中id ...
- tp5使用jwt生成token,做api的用户认证
首先 composer 安装 firebase/php-jwt github:https://github.com/firebase/php-jwt composer require firebas ...
- 用java进行测试php写的接口
<?php /* * @Author: anchen * @Date: 2018-07-06 13:53:19 * @Last Modified by: anchen * @Last Modif ...