react dispatch_手把手教你创建Ant Design Pro的React项目-CSDN博客

介绍

主要是使用 React 和 TypeScript 以及 Ant Design Pro 开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design 是蚂蚁金服的UI框架，发展历程可以说是从 saga-redux -> dva -> umi -> ant design ，说 ant design 是 react 的最佳实践确实是名副其实；其中我最喜欢或者说是 dva 最显著的地方就是修缮了 redux 的不足之处。

搭建

安装 cnpm，yarn，tyarn

npm i -g cnpm --registry=https://registry.npm.taobao.org
cnpm i yarn -g
yarn global add tyarn

2. Ant Design Pro 立足于 umijs 、dva，需要安装 umi

yarn global add umi

3. 创建 Ant Design Pro 项目（先创建test文件夹）

mkdir test
cd test
yarn create umi  （这里选择 ant design pro -> typescript -> simple）
tyarn
yarn start

+ config
    - config.ts  路由设计
    - proxy.ts   代理（打包后无效）
+ mock           模拟数据
+ src
    - assets     放一些静态资源文件（png，svg等）
    - component  主要放全局组件
    - layouts    权限、token获取
    - models     详细内容见dva，换言之是redux （interface、数据交互）
    - pages      页面
    - serives    请求（get,post）
    - utils      放一些公用方法

/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */

举个栗子（dva）

TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化

/** 
 * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页
 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less）
 * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET)
 * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api
 **/

现在你需要创建一个 src/services/home.ts 去对接后台的接口。

import request from '@/utils/request'    // ant design pro 自带（无须修改，每次请求自动携带 token）

interface HomeParams{
   currentPage: number;
   pageSize: number;
}

export async function queryGetMyHomeData(payload: HomeParams){
    return request( `/api/home` ,{
        method: 'GET',
        params: {
            // 填写你需要传给后端的字段
            ... payload,
        }
        /**
         * 如果是 POST 请求，请将 params 修改成 data
         **/
    })
}

接下来，你需要创建一个 src/models/home.ts 去调用上面那个接口（详细教程看 dva），我这是临时起意边想边写的（俗称瞎编乱造）。

import { queryGetMyHomeData } from '@/services/home'
import { Effect, Reducer } from 'umi';

export interface DataItem{
    // 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）
    id: number;
    title: string;
    createdDate: number; 
    brief: string;
}

// state 对应的类型（接口）
export interface HomeState{
    currentPage: number;
    data: Array<DataItem>;
}

export interface HomeModelType{
    namespace: string;    // 说好听点叫做 "命名空间"
    state: HomeState;     // 就是 state
    effects: {            // effects 里面的可以调用 reducers 里面的
        getData: Effect,
        changePage: Effect,
    };
    reducers: {
        setData: Reducer<HomeState>,
        setPage: Reducer<HomeState>,
    };
}

const HomeModel = {
    namespace: 'home',
    state: {
        currentPage: 1,
        data: [],
    },
    effects: {
        *getData( { payload }, { call, put }){
            const res = yield call( queryGetMyHomeData, payload );  // payload 要对应 queryGetMyHomeData 的形参，否则另当别论
            const arr = Array.isArray(res.data) ? res.data : [];    // 我这里假设返回的 res.data 就是我们所需要的数据
            yield put({    // 将数据放到 state 里面
                type: 'setData',
                payload: {
                    data: arr,
                }
            })
        },
        *changePage( { payload }, { call, put }){
            yield put({ type: 'setPage', payload });
            // yield take( 'setPage/@@end' );    // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题
            yield put({ type: 'getData', payload });
        },
    },
    reducers: {
        setData( state, { payload } ){
            return {
                ... state,
                ... payload,
            }
        },
        setPage( state, { payload } ){
            return {
                ... state,
                ... payload,
            }
        },
    }
}

export default HomeModel;

让 src/pages/home/index.tsx 去 connect HomeModel

import React, { useEffect } from 'react';
import { connect, Dispatch } from 'umi';
import { HomeState } from '@/models/home'

interface HomeProps{
    dispatch: Dispatch;
    home: HomeState;
}

const Home: React.FC<HomeProps> = (props) => {
    // 拿到的内容可以直接使用
    const { 
        dispatch,
        home: {
            currentPage, 
            data,
        }
    } = props;

    // 获取数据，或者说是初始化数据
    useEffect(() => {
        dispatch({
            type: 'home/getData' ,
            payload: {
                currentPage,
                pageSize: 8,
            }
        })
    }, []);

    // 页码改变事件
    function pageChange(page){
        /**
         * page的修改是两个操作
         * 1. 修改 page
         * 2. 获取数据
         * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题
         **/
        dispatch({
            type: 'home/changePage' ,
            payload: {
                currentPage: page,
                pageSize: 8,
            }
        })
    }

    return (
        // ... 这里我就省略不写了
    );
}

export default connect (home: HomeState => home)(Home);