使用Redux-thunk中间件发送ajax请求

在这里插入图片描述
这个组件在componentDidMount生命周期函数里进行ajax请求,这么写没什么大问题,但是如果把异步请求或者复杂的逻辑都放在组件里实现的时候,组件就会显得过于臃肿,所以遇到异步请求或者复杂的业务逻辑就要把它移到其它的地方进行统一的管理,此时就可以移到redux-thunk这个中间件来进行管理,redux-thunk可以把这些异步请求或者复杂的业务逻辑放在action里去处理,redux-thunk是redux的一个中间件。
首先当创建store的时候就可以用这个中间件,先要引入applyMiddleware这个方法,这个方法使得我们可以使用中间件。
在这里插入图片描述
在这里插入图片描述
实际上,__REDUX_DEVTOOLS_EXTENSION…也是redux的一个中间件,所以可以把它们俩放在数组里一起使用。具体使用看GitHub。

这样在创建redux的store的时候就使用了redux-thunk 中间件,这个中间件是redux的中间件而不是react的中间件,我们是在创建了redux的store的时候用的这个中间件。

接着就可以把组件里请求数据的代码移到store里的action里了,之前actionCreator.js文件里返回的都是函数,这个函数返回的都是一个对象。当使用redux-thunk的时候,action就也可以返回一个函数了,这个函数里面做异步请求数据的操作,然后在组件里调用store.dispatch(action返回的函数)
在这里插入图片描述
在这里插入图片描述
上面构建的action是一个函数,当调用store.dispatch(action)的时候,action就会自动执行,action就是getTodoList方法返回的那个函数,那个函数被执行就会发起请求,然后获取并打印出数据。

接着就是改变store里的数据,实际上,当调用getTodoList生成一个action内容是函数的的时候,这个函数可以接收到store的dispatch方法,所以在函数里就可以直接使用store里的dispatch方法了。
在这里插入图片描述
总结:
1,首先安装redux-thunk中间件的安装;
2,创建store的时候使用这个中间件,照着官方的文档一步一步的去配置,
在这里插入图片描述
配置完之后就既可以用redux-thunk这个中间件又可以使用redux-devtools这个开发者工具。

3,接着就可以在action里面写异步的代码了,以前我们创建一个action返回的只能是一个js对象,但是现在当使用redux-thunk之后,返回的也可以是一个函数了,然后就可以通过store.dispatch()把这个函数发送给store,之所以可以把这个返回值是函数的action发送出去就是因为使用了redux-thunk。这里dispatch的是一个函数,实际上store.dispatch接收的只能是一个对象,redux-thunk改变了这个只能接收函数的方式。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值