react梳理回顾(二)

action

书写action，绑定action，从页面上发起action，
下面是我写的一个action的request，用的fetch

/**
 * 网络请求的actions
 **/
import * as TYPES from '../types';
import { message } from 'antd';
import * as CONFIG from '../config';

export function request(route, params={}, dispatch, success=null, error=null, { method='GET', headers={}, body=null } = {}, is_form_data=false) {
    dispatch({ type: TYPES.REQUEST_PENDDING}) //开始loading
    const arr = Object.keys(params)
    const p = arr.length > 0 ? ('?' + arr.map((i,index) => `${i}=${params[i]}`).join('&') ): ''
    //console.log(p)
    const uri = `http://${ CONFIG.API_URI }${ route }${ p }`
    let d = {method: method, headers: headers}
    // console.log('headers->',headers)
    if (method!=='GET') d.body = is_form_data ? body : JSON.stringify(body)
    //console.log(`[${method}] ${uri}`)
    //console.log(uri, d)
    fetch(uri, d)
        .then((response) => {
          dispatch({ type: TYPES.REQUEST_SUCCESS}) //loadin结束g
          return response.json()
        })
        .then((data) => {
          //console.log(data)
          if (data.code === '0') {
            //正确情况
            success && success(data)
          }else if (data.code === '000500') {
            message.error('抱歉,服务器出错!')
          }else {
            //其他错误情况
            let datas = data || {}
            let messages = data.message ? JSON.parse(data.message) : ''
            datas.message = messages
            if (data.code === "000401" && messages.code === "100104") {
              message.error('抱歉,用户名或密码错误!')
            }else if (data.code === "000401" && messages.code === "000003") {
              message.error('抱歉,登录过期，请重新登录!')
            }else if (data.code === "000403") {
              message.error('抱歉，您没有这个权限')
            }else if (data.code === "000404") {
              message.error('抱歉,无效的请求')
            }else if (data.code === "000400" && messages.code === "100105") {
              message.error('抱歉,登录过期,请重新登录')
              dispatch({ type: TYPES.LOGGED_OUT })
            }else {
              if(messages.message) {
                message.error(messages.message)
              }
              error && error(datas)
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
}

里面是对参数的分析，整合，然后发出请求，得到回应后根据后台给的信息筛选结果，传递结果。
connect，bindActionCreators：属性的传递，action的调用，连接react组件和redux store。

const mapStateToProps = (state) => {
  return {
    user: state.user,
    //获取到dispatch过来的store里的数据
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      postOrder,
      getOrderPirce,
      //绑定action
    }, dispatch),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(Cargo))

create-react-app

快速搭建一个react项目，目录结构简洁，redux,route等都需要手动搭建，依赖webpack，可以从中配置less，多入口等。配置less详情见：https://www.jianshu.com/p/221c5888d1fa
git：版本管理。