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，在函数中执行异步操作。