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

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

准备阶段

1. 安装axios
   本人是第一次使用axios，百度介绍是用在浏览器中的HTTP库，
   安装命令如下

npm install --save axios

2. 使用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;
  }