P14:Redux进阶-Axios异步获取数据并和Redux结合

接下来我们学习一下如何从后台取得数据，并和Redux结合，实现想要的业务逻辑。比如以前我们的列表数据是在Reducer里写死的，本文就使用Axios从后台获取数据。

利用 easy-mock 创建模拟数据

这个在基础课程中已经讲过了，我就不作过多的介绍了，如果你还不会，就直接看基础课程吧，反复讲也没什么意思。

JSON 的基本格式，如果上面的接口不管用了，你可以用Easy mock自己作一个这样的接口:

{
  "data": {
    "list": [
      '早起跑步锻炼身体',
      '中午下班休息一小时',
      '晚上 8 点到 10 点，学习两个小时'
    ]
  }
}

安装并使用Axios

因为在Redux的学习中，我们使用了新的项目和目录，所以要重新安装Axios插件（以前安装的不能再使用了）。直接使用npm进行安装。

npm install --save axios

安装完成后，就可以在TodoList.js中，引入并进行使用了。

import axios from 'axios'

引入后，在组件的声明周期函数里componentDidMount获取远程接口数据。

componentDidMount(){
    axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/todolist/getList').then((res)=>{
        console.log(res)
    })
}

做完这一步骤后，可以在浏览器中打开，预览下是否控制台(console)获取数据，如果可以获取，说明完全正常。

获取数据后跟Redux相结合（重点）

接下来就可以把得到的数据放到Redux的store中了，这部分和以前的知识都一样，我就尽量给出代码，少讲理论了。 先创建一个函数，打开以前写的store/actionCreatores.js函数，然后写一个新的函数，代码如下：

export const getListAction  = (data)=>({
    type:GET_LIST,
    data
})

这时候保存会显示找不到GET_LIST,我们再到actionTypes.js文件中加入一个常量，然后引入到actionCreatores.js中

export const  GET_LIST = 'getList'

引入到actionCreatores.js中

import {CHANGE_INPUT , ADD_ITEM , DELETE_ITEM , GET_LIST}  from './actionTypes'

这步完成后，回到TodoList.js文件，继续编写axios中的回调内容，在写之前，记得先把getListAction进行引入。

import {changeInputAction , addItemAction ,deleteItemAction,getListAction} from './store/actionCreatores'

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

现在数据已经通过dispatch传递给store了，接下来就需要reducer处理业务逻辑了。打开reducer.js代码如下(详细步骤在代码中作了注释)：

//----关键代码--------start --------引入 GET_LIST
import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM,GET_LIST} from './actionTypes'
//----关键代码--------end 
const defaultState = {
    inputValue : 'Write Something',
    //----关键代码--------start --------删除原来的初始化代码，减少冗余
    list:[]
}
export default (state = defaultState,action)=>{
    if(action.type === CHANGE_INPUT){
        let newState = JSON.parse(JSON.stringify(state)) //深度拷贝 state
        newState.inputValue = action.value
        return newState
    }
    if(action.type === ADD_ITEM ){ 
        let newState = JSON.parse(JSON.stringify(state)) 
        newState.list.push(newState.inputValue)  //push 新的内容到列表中去
        newState.inputValue = ''
        return newState
    }
    if(action.type === DELETE_ITEM ){ //根据 type 值，编写业务逻辑
        let newState = JSON.parse(JSON.stringify(state)) 
        newState.list.splice(action.index,1)  //push 新的内容到列表中去
        return newState
    }
    //----关键代码--------start --------
    if(action.type === GET_LIST ){ //根据 type 值，编写业务逻辑
        let newState = JSON.parse(JSON.stringify(state)) 
        newState.list = action.data.data.list //复制性的 List 数组进去
        return newState
    }
    //----关键代码--------end --------

    return state
}

这样就完成了一次从后台请求数据，然后和 Redux 结合的过程。希望小伙伴都能练习一下，我们的程序员越来越像真实的开发了，小伙伴也要在练习中不断熟悉这种开发模式。

以上关于P14:Redux进阶-Axios异步获取数据并和Redux结合的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。