1. /*
    2.  * @Author: zhudongguang
    3.  * @Date: 2022-02-16 14:47:49
    4.  * @LastEditTime: 2022-03-03 12:35:49
    5.  * @数据流向为 页面 dispath ==> Service ==> Effects ==> Reducers ==> 页面
    6.  */
    8. // const model = {
    9. //   namespace: '', model的命名空间
    10. //   state: {}, 初始仓库
    11. //   reducers: {},  处理同步数据的函数
    12. //   effects: {}, 处理异步数据的函数
    13. //   Subscription: {}, 订阅数据源
    14. // };
    15. // export default model;
    17. import { Effect, ImmerReducer, Subscription } from 'umi';
    18. import * as namespaces from '@/constants/namespaces';
    20. export interface DemoModalState {
    21.     name: string;
    22. }
    24. export interface DemoModelType {
    25.     // namespace命名空间，相当于给model取个名字，但是各个model的namespce是不能重复的
    26.     namespace: string;
    27.     // state是数据仓库，就是存数据的地方，model里的数据都是存放在这里的
    28.     state: DemoModalState;
    29.     // 异步方法，简单来说我们的异步请求就写在这里
    30.     effects?: {
    31.         query?: Effect;
    32.         asyncGetData: Effect;
    33.     };
    34.     // reducers把数据存到仓库（存到state）里的唯一方法，我们修改state里的数据不能直接像this.name='liu'这样去修改，而必须通过调用reducers里的方法
    35.     reducers: {
    36.         save: ImmerReducer<DemoModalState>;
    37.         // state 为上次state的值，action 为触发payload中的值
    38.         getList: (state: DemoModalState, action: any) => any;
    39.     };
    40.     // 订阅，比如监听页面，监听到进入了某某页面就让它执行相关代码之类的
    41.     subscriptions: { setup: Subscription };
    42. }
    44. const data = [
    45.     {
    46.         key: '1',
    47.         name: 'John Brown',
    48.         age: 32,
    49.         address: 'New York No. 1 Lake Park',
    50.         tags: ['nice', 'developer'],
    51.     },
    52.     {
    53.         key: '2',
    54.         name: 'Jim Green',
    55.         age: 42,
    56.         address: 'London No. 1 Lake Park',
    57.         tags: ['loser'],
    58.     },
    59. ];
    61. const DemoModel: DemoModelType = {
    62.     namespace: namespaces.DEMO,
    63.     state: {
    64.         name: '',
    65.     },
    66.     effects: {
    67.         // *query({payload}, {call put}) {},
    68.         *asyncGetData(action, effects) {
    69.             const listData = yield Promise.resolve(data);
    70.             // 如果想用实际接口拿到数据需要调用call
    71.             // const { data } = yield effects.call(remoteApi)
    72.             // 用effects.put 把数据推给reducers， 并触发getList 函数
    73.             yield effects.put({ type: 'getList', payload: listData });
    74.         },
    75.     },
    76.     reducers: {
    77.         save(state, action) {
    78.             state.name = action.payload;
    79.         },
    80.         getList(state, action) {
    81.             return { listData: action.payload };
    82.         },
    83.     },
    84.     subscriptions: {
    85.         setup({ dispatch, history }) {
    86.             // dispatch({ type: 'asyncGetData' });
    87.             // return history.listen(({ pathname }) => {
    88.             //   if(pathname === '/home') {
    89.             //     dispatch({ type: 'demo/getList' })
    90.             //   }
    91.             // })
    92.         },
    93.     },
    94. };
    96. export default DemoModel;