react + redux Router + node实践总结(前后端联调）

前后端联调：在react中使用node

• 使用axios发送异步请求
  
  • npm install axios –save
  • 端口不一致(跨域，ajax不支持），如何发送，使用proxy配置转发
    
    • 在package.json数据中添加”proxy”: “转发到的地址”
  • axios拦截器，统一loading处理
  • redux里使用异步数据，渲染页面

// config.js， 在此文件中配置axios的拦截
import axios from 'axios'
import { Toast } from 'antd-mobile'

// axios拦截请求, 添加loading
axios.interceptors.request.use(function(config) {
    Toast.loading('加载中', 0)
    return config
})

// axios拦截响应
axios.interceptors.response.use(function(config) {
    Toast.hide()
    return config
})

// auth.redux.js, 在reducer中实现异步调用mongodb的数据
import { axios } from 'axios'

const Login = 'login'
const Logout = 'logout'
const UserData = 'userData'
const initState = {
    isAuth: false,
    user: 'lmh',
    age: 18
}

export function auth(state=initState, action) {
    switch(action.type) {
        case Login:
            return {...state, isAuth: true}
        case Logout:
            return {...state, isAuth: false}
        case UserData:
            return {...state, user: action.payload.user, age: action.payload.age}
        default:
            return state
    }
}

//action
export function login() {
    return {type: Login}
}
export function logout() {
    return {type: Logout}
}
// 异步获取mongodb的数据
export function asynGetUserData() {
    // dispatch用来能和数据修改
    return dispatch => {
        axios.get('/data')
            .then(res => {
                if(res.status == 200) {
                    dispatch(userData(res.data))
                }
            })
    }
}
export function userData(data) {
    return {type: UserData, payload: data}
}

// auth.js, 使用redux中的数据
import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { login, asynGetUserData } from "./auth.redux";

@connect(
    state => state.auth,
    {login, asynGetUserData}
)

class Auth extends React.Component {
    componentDidMount() {
        this.props.asynGetUserData()
    }
    render() {
        return(
            <div>
                <h2>我的名字是{this.props.user}, 年龄是{this.props.age}</h2>
                {this.props.isAuth ? <Redirect to='/dashbord/' /> : null}
                <h3>还未登录，请点击登录</h3>
                <button onClick={this.props.login}>登录</button>
            </div>
        )
    }
}

export default Auth