搭建一个React-redux-router + antd项目（五）用action更新store

搭建一个React-redux-router + antd项目（一）初始化项目
搭建一个React-redux-router + antd项目（二）安装 redux、router、axios和antd
搭建一个React-redux-router + antd项目（三）使用路由
搭建一个React-redux-router + antd项目（四）redux初始

本篇介绍使用 axios 请求后台接口获取数据库数据，利用action更新store，从而实现页面状态的刷新。
以登录功能做一个实例，一般复杂的项目建议将action单独管理，在login/下创建action.js，添加一个登录的action

// login/action.js
import axios from "axios";

// 登录函数
export const passwordLogin = (data) => {
  return dispatch => {
    dispatch({
      type: "PASSWORD_LOGIN_START",
    })
    axios.post(
      'http://backstage.chuangyinzi.com/api/images/login',
      data
    )
      .then(function (res) {
        dispatch({
          // 实际项目中最好将所有的 type 集中管理，可以避免重名等问题;
          type: "PASSWORD_LOGIN_SUSS",
          payLoad: res.data.data.user
        })
      })
      .catch(function (error) {
        dispatch({
          type: "PASSWORD_LOGIN_ERROR"
        })
      })
  }
}

更新对应的reducer

// login/reducer.js
export default function login(
  state = {
    loading: false,
    loginInfo: {}
  },
  action
) {
  switch (action.type) {
    case 'PASSWORD_LOGIN_SUSS':
      return Object.assign({}, state, {loginInfo: action.payLoad})

    default:
      return state;
  }
}

现在组件中使用接下来就要用到 bindActionCreators了。在login/login.js 添加如下内容

import React, { Component } from "react";
// 引入"react-redux"两个API中的高阶函数 connect（另一个是 Provider），用来将state绑定到Connect组件的参数上
import { connect } from "react-redux";

+ import { bindActionCreators } from 'redux';
+ import { passwordLogin } from './action';

+ function mapDispatchToProps(dispatch) {
+   return bindActionCreators({
+     passwordLogin, 
+ }, dispatch);
+ }

class Login extends Component {
  state = {
    phone: 18888888888,
    password: 123456
  }

  login = () => {
    const data = {
      phone: this.state.phone,
      password: this.state.password,
    }
    this.props.passwordLogin(data)
  }

  render() {
    console.log(this.props.loginInfo)
    return (
      

        
账号:{this.state.phone}
        
密码:{this.state.password}
        
点击登录
      
    )
  }
}

- export default connect(state => state.login)(Login);
+ export default connect(state => state.login, mapDispatchToProps)(Login);

点击页面中的【点击登录】，就可以在控制台打印出从后台获取到之后存在store中的登录信息的数据啦。在实际项目中，就是用这些数据来渲染页面，展示想要的内容。另外上面用到的 axios 会做进一步的封装，统一管理后台接口以及参数的处理，便于开发和维护。

下一篇：实现数据持久化。

搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化