combine-action-reducer

1. 创建一个action-reducer; 同时创建action creator 函数 和reducer 函数;

import { createStore } from "redux";
import { ActionReducer } from 'combine-action-reducer';

class Person {
  name: string = "1231";
  age: number = 12;
  size: string = "";
}

// action-reduer 实例
const Acr = ActionReducer(new Person())({
  setSize(s, a: { x: number; y: number }) {
    return {
      ...s,
      size: "width:" + a.x + "/" + "height:" + a.y,
    };
  },
});


// 使用 as any 避免 createStore 无法识别reducer 的类型.
const store = createStore(Acr.reducer as any);

// 发出一个dispatch, 触发setSize 的执行;
store.dispatcch(
  Acr.action.setSize({
    x: 12, 
    y: 232,
  })
);

2. 提供将多个的action-reducer 的链接功能; 可以得到一个大的reducer 和对应的大action creator对象.

CombineActionReducer 生成的依然是一个ActionReducer 的实例;

import { createStore } from "redux";
import { ActionReducer , CombineActionReducer} from 'combine-action-reducer';

class Person {
  name: string = "1231";
  age: number = 12;
  size: string = "";
}

// 在多个分支上创建ActionReducer;
const Acr = CombineActionReducer({
  one: ActionReducer(new Person())({
    setSize(s, a: { x: number; y: number }) {
      return {
        ...s,
        size: "width:" + a.x + "/" + "height:" + a.y,
      };
    },
  }),
  two: ActionReducer(new Person())({
    setSize(s, a: { x: number; y: number }) {
      return {
        ...s,
        size: "width:" + a.x + "/" + "height:" + a.y,
      };
    },
  }),
});

// 使用 as any 避免 createStore 无法识别reducer 的类型.
const store = createStore(Acr.reducer as any);

// 只是触发one 部分的 Reducer 的更新;
store.dispatch(
  Acr.action.one.setSize({
    x: 1,
    y: 2,
  })
);