Redux中间件——Redux-thunk

什么是thunk?

Redux-thunk是作为redux的middleware存在的,thunk是函数编程界的一个专有名词,主要用于calculation delay,也就是延迟计算。

function wrapper(arg){
	//内部返回的函数就叫thunk
	return function thunk(){
		console.log('thunk running,arg:',arg)
	}
}

//我们通过调用wrapper来获得thunk
const thunk=wrapper('warpper arg')

//然后在需要的地方再去执行thunk
thunk()

可以看到,这种代码的模式是非常简单的,以前我们都写过这样的代码,只不过没有意识到这就叫做thunk而已。

Redux-thunk

为了理解中间件,我们可以自己思考一下:如果要添加功能,需要在哪个环节添加?

1.Reducer:纯函数,只承担计算State的功能,不合适承担其他功能,也承担不了,因为理论上,我们需要保持reducer的纯净,纯函数不进行读写操作
2.View:与state一一对应,可以看作State的视觉层,也合适承担其他功能。
3.Action:存放数据的对象,即消息的载体,只能被别人操作,自己不能进行任何操作。

Redux的核心概念其实非常简单:将需要修改的state存入store中,发起一个action用来描述发生了什么,用reducer描述action如何改变state tree。创建store的时候需要传入reducer,真正能改变store中数据的是store.dispatch API.

默认情况下,Redux自身只能处理同步数据流。但是在实际项目开发中,状态的更新、获取,通常是使用异步操作实现的。而异步操作就是通过Redux中间件来实现的。其实确切的来说,Redux中间件是用来处理具有副作用(side effect)的功能,其中,异步操作就是最常见的side effect.

Redux-thunk用法

redux-thunk中间件可以处理函数形式的action。因此,在函数形式的action中就可以执行异步操作。

语法:
1.thunk action是一个函数
2.函数包含两个参数:dispatch、getState

//函数形式的action
const thunkAction=()=>{
	return (dispatch,getState)=>{}
}

//解释:
const thunkAction=()=>{
	//注意:此处返回的是一个函数,返回的函数有两个参数
	//第一个参数:dispatch函数,用来分发action
	//第二个参数:getState函数,用来获取redux状态
	return(dispatch,getState)=>{
		setTimeout(()=>{
			//执行异步操作
			//在异步操作成功后,可以继续分发对象形式的action来更新状态
		},1000)
	}
}

使用步骤:
1.安装:yarn add redux-thunk
2.导入redux-thunk
3.将thunk添加到applyMiddleware函数的参数(中间件列表)中
4.创建函数形式的action,在函数中执行异步操作。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值