定义Normal Action

Action的作用是直接变更reducer的值。框架对Action做了诸多的改良,精简代码并增强代码的可阅读性。

  1. import { Model } from '@redux-model/web';
  2.  
  3. interface Data {
  4. counter: number;
  5. }
  6.  
  7. class FirstModel extends Model<Data> {
  8. // Action
  9. increase = this.action((state) => {
  10. state.counter += 1;
  11. });
  12.  
  13. // Action
  14. plusStep = this.action((state, step: number) => {
  15. state.counter += step;
  16. });
  17.  
  18. // Action
  19. reduceStep = this.action((state, payload: { step: number }) => {
  20. state.counter -= payload.step;
  21. });
  22.  
  23. protected initReducer(): Data {
  24. return {
  25. counter: 0,
  26. };
  27. }
  28. }
  29.  
  30. export const firstModel = new FirstModel();

一个模型可以定义无数个Action,只要你愿意。

Action的回调函数中,最多只能带两个参数。第一个参数是reducer的state,我们可以变更state的值,从而变更reducer。第二个参数是Action的真正的参数,它可以是任何类型的值,但我们一般使用对象,这样能接收到更多的数据

  1. console.log(firstModel.data.counter); // counter === 0
  2.  
  3. firstModel.reduceStep({ step: 2 }); // counter === -2
  4.  
  5. firstModel.increase(); // counter === -1
  6.  
  7. firstModel.plusStep(1); // counter === 0

!> 调用模型的Action,不需要使用dispatch()函数包裹,框架会自动处理。