index.ts

 1    const store = {

 2   state: {

 3     num: 20,

 4   },

 5   actions: {

 6     // 放同步的代码

 7     add1(newState: { num: number }, action: { type: string }) {

 8       // redux 异步写法有问题

 9       // setTimeout(() => {

10       //   newState.num++;

11       // }, 500);

12       newState.num++;

13     },

14     add2(newState: { num: number }, action: { type: string; value: number }) {

15       newState.num += action.value;

16     },

17     add3(newState: { num: number }, action: { type: string; value: number }) {

18       newState.num += action.value;

19     },

20   },

21   // 优化redux-thunk的异步写法 （模仿vuex）

22   asyncActions: {

23     asyncAdd1(dispatch: Function) {

24       setTimeout(() => {

25         dispatch({ type: "add1" });

26       }, 1000);

27     },

28   },

29

30   // 1 初始写法

31   // add1: "add1",

32   // add2: "add2",

33   // 2 名字同一管理

34   // actionNames: {

35   //   add1: "add1",

36   //   add2: "add2",

37   // },

38   // 3 优化

39   actionNames: {},

40 };

41 // 我们现在想做到actionNames自动生成。不用我每一次添加一个方法，

42 // 都要在actionNames手动添加键值对，这样很麻烦。

43

44 let actionNames = {};

45 /**

46  * actionNames有多少个键值对，取决于actions里有多少个函数，

47  * 遍历store.actions，给actionNames添加键值对

48  */

49 for (let key in store.actions) {

50   actionNames[key] = key;

51 }

52 store.actionNames = actionNames;

53

54 export default store;

55 // 封装的目的：最终是有利于我们的开发或者维护

56 // 封装的思路是：将来开发的时候只需要把数据写和方法写入到这个

57 // 状态文件中，例如：XxxxStatus/index.ts，而不需要再去操作其

58 // 他的文件。(我们往这个方向去封装)

reducer.ts:

import handleNum from "./index";

// 管理数据

// const defaultState = {

//   // num: 20,

//   // num: Numstatus.state.num  // 数据一多要写很多次

//   ...handleNum.state   // 解构的写法

// };

let reducer = (

  state = { ...handleNum.state }, // 直接解构

  action: { type: string; value: number }

) => {

  // 调用dispatch就会执行这里的代码

  // console.log("初始化执行了reducer....");

  // 深度复制

  let newState = JSON.parse(JSON.stringify(state));

  // switch的做法是拿action.type和case后面的每一个值进行对比，进行遍历

  // 把case后面的值做成对象，actionsNames

  // 1 原始写法

  // switch (action.type) {

  //   case handleNum.add1:

  //     handleNum.actions[handleNum.add1](newState,action)

  //     break;

  //   case handleNum.add2:

  //     handleNum.actions[handleNum.add2](newState,action)

  //     break;

  //   default:

  //     break;

  // }

  // 2 [优化]，上面的写法，我们在每添加一个方法，都要多写一个case

  // 拿action.type和actionsNames每一个项进行对比，如果相等，就调用

  // 模块名 actions[下标](newState,action)

  for (let key in handleNum.actionNames) {

    // key 是每一个键

    // 判断是否相等

    // if (action.type === "add1") {

    if (action.type === handleNum.actionNames[key]) {

      handleNum.actions[handleNum.actionNames[key]](newState, action);

      break;

    }

  }

  // 好处：每一次写一个方法，都不需要手动添加case

  return newState;

};

export default reducer;