redux Promise|thunk 获取axios数据

新建一个js文件 引用：

import { createStore, applyMiddleware, compose } from 'redux'
import promise from 'redux-promise'
import thunk from 'redux-thunk'
const initState = {
    name: '',
    password: '',
    data: [],
    urlDdata: [],
}
function redecer ( state= initState , action ){
    console.log(action)
    switch (action.type) {
        case 'URLDATA':
            return { ...state, ...{ urlDdata: action.payload }}
        default:
            return state
    }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
    redecer,
    composeEnhancers(applyMiddleware(promise, thunk))
)

export { store } // 导出

封装axios成一组件 js文件

import axios from 'axios' //引用axios
//get请求
export function GetData(url, params={}){
    return new Promise((resolve, reject)=>{
        axios({
            method: 'get',
            url,
            params
        })
        .then((res)=>{
            const data= res.data
            if(data.code === 200){

                resolve(data.data)
            }else{
                reject(data)
            }
        })
        .catch(err=> { reject(err) } )
    })
}

获取数据的页面引用 （redux）

import React from 'react';
import { GetData } from '路径'

export default @connect(state =>{
    return{
        urlDdata: state.urlDdata
    }
},{
    getUrlData: () =>({  //自定义
        type: 'URLDATA',
        payload: GetData('http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f')  //获取数据接口
    })
})
class Content extends React.Component{
    constructor(props){
        super(props)
        this.props.getUrlData() //调用action
    }
    render(){
        console.log(this.props.urlDdata)
        return(
            
abc
        )
    }
}