redux-thunk:异步action

  • 在react中action是一个普通的JavaScript对象。reducer是一个纯函数,只能用于改变state,接受旧的state和action,返回一个新的state,不可以在reducer中进行异步操作,如定时器,http请求等。每次action触发(dispatch)时,都会时reducer同步的对store进行更新。
  • 但是实际项目中会有很多都是要根据需求来触发action的,如http请求,异步获取数据之后,根据返回的数据来触发action。
  • 那么如何对store进行异步更新呢?
  • 举一个简单的例子:点击Button,触发一个定时器,1s只会让state中的count+1,
setTimeout(function () {
    store.dispatch({type: 'INCREASE'});
  }, 1000);

但是这还是同步更新store。

使用中间件

Redux本身提供的Api与功能并不多,但是它提供了一个中间件(插件)机制,可以使用第三方提供的中间件或自己编写一个中间件来对Redux的功能进行增强,比如可以使用redux-logger这个中间件来记录action以及每次action前后的state、使用redux-undo来取消/重做action,更多中间件
根据官方文档的推荐,选择使用 redux-thunk中间件
安装:npm install redux-thunk --save
挂载: 在初始化store的时候,将中间件挂载到store实例上,

`import { createStore , applyMiddleware } from 'redux';`
import thunk from 'redux-thunk'
import { reducers } from '../reducers/reducers'

export const store = createStore(
    reducers,
    applyMiddleware(thunk)
) 
异步action

原来,action触发时,store.dispatch( {} )直接说一个action对象,对象至少包含一个 type。使用redux-thunk中间件之后,还可以接受第二个参数,是一个方法,该方法接受两个参数,第一个是dispatch(相当于 store.dispatch),第二个是 getState(相当于 store.getState),所以现在可以这样来触发dispatch:

store.dispatch( (dispatch,getState) => {
	dispatch( { type:  '' } )
} )

所以上面代码可改为:

setTimeout(function () {
    store.dispatch({type: 'INCREASE'});
  }, 1000);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值