Ant Design Pro 数据加载流程

Ant Design Pro 数据加载流程

作为后端研究两天 什么react es dva redux state props 单向传递，似懂非懂，这里记录Ant Design Pro 数据加载流程，可能不对，自己理解就好，可以做出增删改查页面，没必要死扣原理

dispatch -> model -> effects -> reducers -> connect -> props

// dispatch是一个函数，入参是一个Action，出参是任意类型，Action的结构可以看源码
dispatch(action: Action);

//index.ts
dispatch({
  	//根据listAndbasicList/fetch查找model.ts里的命名空间为listAndbasicList，方法为fetch的effect
    type: 'listAndbasicList/fetch',
    payload: {
        count: 5,
    },
});

model.ts
export interface StateType {
  list: BasicListItemDataType[];
}

// 这个是定义，下面是实例
export interface ModelType {
  namespace: string;
  state: StateType;
  effects: {
    fetch: Effect;
  };
  reducers: {
    queryList: Reducer<StateType>;
  };
}

// 实例
const Model: ModelType = {
  namespace: 'listAndbasicList',

  state: {
    // 初始值
    list: [],
  },

  effects: {
    // 第一个参数payload实际是action的解构，第二个参数是effects，是框架传进来的
    *fetch({ payload }, { call, put }) {
        //相当于如下写法
        // *fetch(action, effects) {
        // const { payload } = action;
        // const { call, put } = effects;
      
        // 通过看控制台打印数据可以看出
        // console.log( 'action', action );
        // console.log( 'effects', effects );

      //调用service里的服务
      const response = yield call(queryFakeList, payload);
      yield put({
         //根据这个queryList找reducer
        type: 'queryList',
        payload: Array.isArray(response) ? response : [],
      });
    },
  },

  reducers: {
     // state 就是，effect的put传进来的，实际就是
     state: {
       list: [],
      },
    // action就是 effect的是put的第一个入参数，也就是上边的put的入参
    queryList(state, action) {
      //这里返回的数据会被框架存储到全局的state中
      return {
        ...state,
        list: action.payload,
      };
    }
  },
};


//再回到index.ts
export default connect(
  // connect第一个参数是个函数：mapStateToProps?: Function，状态转换为属性，也就是说入参是state，出参是属性
  // 这个state是全局的，存储所有model.ts下reducers返回的数据
  (state) => {
    // 通过控制台可以清楚的看到state的结构，很重要，很重要，很重要
    console.log("globalState", state);

    //这个listAndbasicList 要与命名空间对应, 是对应命名空间reducer返回的数据
    //比如这个例子listAndbasicList就是: { list : BasicListItemDataType[] }
    const {listAndbasicList} = state;

    // 这是state固定的字段
    const {loading} = state;

    return {
      // 这个listAndbasicList是reducer返回的数据，整个return返回值是需要复赋值给组件的props的，
      // 所以要与组件的props的属性对应(不对应可以再做一层转换)
      // 比如这个例子中的转换
      // const {
      //	 loading,
    	//   dispatch,
    	//	 listAndbasicList: { list },
  		//	} = props;
      listAndbasicList,
      loading: loading.effects['listAndbasicList/fetch'],
    }
  }
)(BasicList);