什么是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,在函数中执行异步操作。