React中Dva的models简单使用

最新推荐文章于 2024-02-20 16:30:33 发布

_Boboy

最新推荐文章于 2024-02-20 16:30:33 发布

阅读量1.8k

点赞数

分类专栏： Dva

本文链接：https://blog.csdn.net/weixin_43720095/article/details/106354031

版权

Dva 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

import { EffectsCommandMap } from 'dva';
import { AnyAction, Reducer } from 'redux';
import {fetchGql} from "@/fetch";

export type Effect = (
  action: AnyAction,
  effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;

interface StateType {
  [modalState:string]:any;
}

export interface ModelType {
  namespace: string;
  state: StateType;
  subscriptions: {
    [modalSubscriptions:string]:Function
  }
  effects: {
    [modalEffect:string]: Effect;
  };
  reducers: {
    [modalReducer:string]: Reducer<StateType>;
  };
}

export const gqlState = (gqlApi: string, model: any):ModelType =>
  Object.assign(
    {
      // 命名空间为:gql+Api的名字（api的首字母大写）
      namespace: `gql${gqlApi.replace(gqlApi[0], gqlApi[0].toUpperCase())}`,
      effects: {
        *[gqlApi + 'Effect']({ type, payload }: any, { put, call, select }: any) {
          let ret;
          try {
            ret = yield call(fetchGql, payload);
          } catch (e) {
            alert(`访问gqlApi出错：${e.message}`);
          }
          yield put({ type: gqlApi, payload: ret.data[payload] });
        },
      },
      reducers: {
        [gqlApi](state: any, { payload }: any) {
          alert(`请在reducers里写一个同名的函数来覆盖本函数：${gqlApi}`);
        },
      },
    },
    model,
  );