react

redux中间件—redux-thunk

redux使用dispatch派发action会触发reducer,但是有时候我们需要dispatch一个action之后,到达reducer之前,进行一些额外的操作(一般请求异步数据),就需要用到中间件(middleware)。中间件就是对dispatch()的增强。

redux-thunk原理

redux-thunk让store.dispatch方法不只接受一个对象,也可以接受一个函数,它内部做了处理,如果这个接收到的是一个函数,就执行它(可在这个函数里做异步操作),如果不是,就按照原来的dispatch执行。

redux-thunk使用

安装: yarn add redux-thunk

使用redux中提供的applyMiddleware方法可以将所有中间件组成一个数组,依次执行(这里只用redux-thunk中间件)。现在就已经完成了dispatch()的功能增强。

不管我们使用不使用中间件需要更改store中的state都要经过action,定义好action;再定义dispatch接收的那个函数(也就是redux-thunk帮我们执行的函数,函数接收一个dispatch),在此函数中进行我们的异步操作,操作完成后再去dispatch派发action改变state(此时派发,接收的是一个action对象,所以与原生dispatch运行一致)。

此时我们还没有dispatch派发getBannerData函数

在组件中配合react-redux派发getBannerData函数。

整个redux-thunk流程就是这样。

示例结果

404条评论

Leave a Reply

邮箱地址不会被公开。