先说说中间件的理解:中间件的作用就是在执行某一任务过程的时间节点中,如执行前,执行中,执行后等等时间节点,插入某一项操作。
redux-thunk就是一款中间件,它能让我们在修改redux的state这一过程中,插入判断,让原本能够自动dispatch改变state的行为------变成需要我们在获取到正确的value值,进行判断之后,再通过手动调用dispatch来改变state
加入redux-thunk和不加入redux-thunk的体验上的区别,可以简单概况为,使用redux-thunk,我们需要手动去调用dispatch,这样我们可以在执行异步修改state的时候能让state的值变得可控。不使用redux-thunk,我们就不需要手动去调用dispatch,而是自动调用dispatch来修改state,这不适合异步修改state
使用redux-thunk的action函数写法
export const asyncChangeLocation = () => {
return async (dispatch: any) => {
const data: any = {};
const params: any = {
type: 'ASYNC_CHANGE_LOCATION',
payload: {
data
}
};
dispatch(params);
}
}
不使用redux-thunk的action函数写法
export const changeToken = (token: string) => {
return {
type: 'CHANGE_TOKEN',
payload: {
token
}
}
};