【Redux学习-6】使用axios请求后台

上一小节:【Redux学习-5】代码逻辑和UI分离

准备阶段
  1. 安装axios
    本人是第一次使用axios,百度介绍是用在浏览器中的HTTP库,
    安装命令如下
npm install --save axios
  1. 使用easy-mock模拟后台的response数据
    打开www.easy-mock.com,使用网站默认创建的一个项目,在其中新建一个GET请求方式的request,返回的数据格式如下,请求URL为BaseUrl+接口URL。
{
  "data": {
    "list": [
      "早上8点半起床",
      "中午12点吃饭休息两小时",
      "晚上9点到11点,学习两个小时"
    ]
  }
}
具体实现
  1. NeedDoneList.js中创建 componentDidMount生命周期方法,方法内借助axios请求easy-mock的URL从而获取数据。
  2. actionCreators.js中新建获取list的action
  3. NeedDoneList.js的componentDidMount方法中将步骤二的action存至store
  4. reducer.js中处理action

参考代码

//actionCreators.js
export const getListAction = (data) => ({
    type:GET_LIST,
    data
})

//actionTypes.js
export const GET_LIST = 'getList'

//NeedDoneList.js
componentDidMount() {
 axios.get('https://www.easy-mock.com/mock/5df7891ee0a2f10aabcde1e9/example/getList').then((res)=>{
     const data =res.data;
     const action = getListAction(data);
     store.dispatch(action)
 })
}

//reducer.js
 if(action.type === GET_LIST) {
      let newState = JSON.parse(JSON.stringify(state))
      newState.data = action.data.data.list;
      return newState;
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值