使用redux-thunk中间件进行异步请求

25 篇文章 0 订阅
1、安装
	npm install redux-thunk

2、引入,在store文件下,index中引入

iimport { createStore,applyMiddleware } from 'redux';
import reducer from './reducer'
import thunk from 'redux-thunk';

const store = createStore(
		reducer,
		applyMiddleware(thunk)
	);//创建公共仓库
export default store;

3、在actionCreators.js

export const getTodoList = () => {
return (dispatch) => {//该函数可以接收dispatch参数
    axios.get('/api/todolist')
        .then((res) => {
            const data=res.data
            console.log(data)
            const action=initList(data)
            dispatch(action)

            console.log(res)
        })
        .catch(() => {})
	}
}

4、在组件中的componentDidMount中

const action=getTodoList()//因为用了redux-thunk中间件,所以这里返回的是一个函数
store.dispatch(action)//当执行这个方法的时候,返回的这个函数会自动执行,也就是去请求数据了,

那么什么是redux中间件呢

实质上是对dispatch方法的一个封装。之前action是一个对象,现在action可以是一个函数,
如果传递过来的是一个对象,dispatch会将这个对象直接传给store。但是如果传过来一个函数,它会让函数先执行,执行完,需要调用store才会去调用。dispatch会根据不同的参数执行不行的事情

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值