使用hooks重构antd pro的想象力（三）我是如何利用hooks干掉redux的

export function Analysis() {
  const [dashboardAnalysis, setDashboardAnalysis] = useState<AnalysisData>();
  const [loading, setLoading] = useState(true);
  const {visitData, salesData, searchData, salesPieData, offlineData} = dashboardAnalysis;

  useEffect(() => {
    if (!loading) {
      return;
    }
    api().then(res => {
      setDashboardAnalysis(res.data);
    })
  }, [loading]);

  return (
    <GridContent>
      // 四个长相类似的块合并成一个组件处理
      <IntroduceRow visitData={visitData} />
      // 销售额访问量的图表
      <SalesCard salesData={salesData} selectDate={() => setLoading(true)} />
      // 线上热门搜索
      <TopSearch searchData={searchData} />
      // 销售额类别占比
      <ProportionSales salesPieData={salesPieData} />
      // 离线数据图表
      <OfflineData offlineData={offlineData} />
    </GridContent>
  );
}

import { useState, useEffect } from 'react';

export type APIFunc<T, P> = (params: P) => Promise<T>

/**
 * @param {api} —api.ts件中封装的接口请求方法
 * @param {defaultData} 页面初始化时接口数据的默认值
 * @param {params} 接口所需要的参数  注意，这里请传入接口需要的完整的参数
 * @param {delay} 当该值为true时，接口不请求
 */
export default function useInitial<T, P>(
  api: APIFunc<T, P>, 
  defaultData: T, 
  _params: P, 
  delay?: boolean
) {
  const [store, setStore] = useState({
    params: _params,
    loading: true,
    data: defaultData,
    errMsg: ''
  });
  const {params, loading, data, errMsg} = store;

  useEffect(() => {
    if (!loading || delay) { return; }
    getData(params);
  }, [loading]);

  function getData(params: P) {
    api(params).then(res => {
      // 这里需要注意，要结合自己团队定义的接口规范返回结果
      let data = res || defaultData;
      setStore({
        ...store,
        errMsg: '',
        loading: false,
        data
      })
    }).catch(e => {
      setStore({
        ...store,
        errMsg: e.message,
        loading: false
      })
    });
  }

  function setParams(params: P, refreshing: boolean) {
    setStore({...store, params});
    refreshing && getData(params);
  }

  return {
    loading,
    setLoading: (loading: boolean) => setStore({...store, loading}),
    data,
    errMsg,
    setParams,
  };
}

const {
    loading, data, setParams, errMsg, setLoading
  } = useInitial<AnalysisData, null>(fakeChartData, initState, null);

import React from "react";
import { Col, Row } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import { fakeChartData } from "./service";
import { AnalysisData } from './data.d';
import useInitial from '@/hooks/useInitial';
import { initState } from '@/pages/dashboard/analysis/model';

import IntroduceRow from "./components/IntroduceRow";
import SalesCard from "./components/SalesCard";
import TopSearch from "./components/TopSearch";
import ProportionSales from "./components/ProportionSales";
import OfflineData from "./components/OfflineData";

export default function AnalysisFC() {
  const {
    loading, data, setParams, errMsg, setLoading
  } = useInitial<AnalysisData, null>(fakeChartData, initState, null);
  const {
    visitData, visitData2, salesData, searchData, offlineData, offlineChartData,
    salesTypeData, salesTypeDataOnline, salesTypeDataOffline,
  } = data;
  const salesPieData = {
    all: salesTypeData,
    online: salesTypeDataOnline,
    stores: salesTypeDataOffline
  };

  if (errMsg) {
    // 处理异常逻辑
  }

  return (
    <GridContent>
      <IntroduceRow visitData={visitData} loading={loading} />

      {/* 这里应该调用setParams(xxxx, true)，传入参数并且根据新参数重新请求接口，但是由于是demo接口设计不够合理，没有参数，因此直接调用setLoading刷新接口即可， */}
      <SalesCard loading={loading} salesData={salesData} onChange={() => setLoading(true)} />

      <Row gutter={24} type="flex" style={{ marginTop: 24 }}>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <TopSearch loading={loading} visitData2={visitData2} searchData={searchData} />
        </Col>
        <Col xl={12} lg={24} md={24} sm={24} xs={24}>
          <ProportionSales loading={loading} salesPieData={salesPieData} />
        </Col>
      </Row>

      <OfflineData loading={loading} offlineData={offlineData} offlineChartData={offlineChartData} />
    </GridContent>
  );
}

export default function App() {
  return (
    // 头部组件
    <Header />

    // 左侧导航
    <NavSide />

    // 设置
    <Setting />

    // 变化的页面组件
    <Pages />
  );
}