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相结合(重点)

接下来就可以把得到的数据放到Reduxstore中了,这部分和以前的知识都一样,我就尽量给出代码,少讲理论了。 先创建一个函数,打开以前写的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结合的过程。希望小伙伴都能练习一下,我们的程序员越来越像真实的开发了,小伙伴也要在练习中不断熟悉这种开发模式。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P14:Redux进阶-Axios异步获取数据并和Redux结合

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发