定义Model

当你想用这个框架时，您必须先定义一个模型类。每个模型都是独立的单元，它可以包含一个reducer和无数个action

  1. // FirstModel.ts
  2. import { Model } from '@redux-model/web';
  3.  
  4. interface Data {
  5.   counter: number;
  6. }
  7.  
  8. class FirstModel extends Model<Data> {
  9.     // Action
  10.     increase = this.action((state) => {
  11.         state.counter += 1;
  12.     });
  13.  
  14.     // Reducer的初始值
  15.     protected initReducer(): Data {
  16.         return {
  17.             counter: 0,
  18.         };
  19.     }
  20. }
  21.  
  22. export const firstModel = new FirstModel();

上面定义了一个完整的redux流程，如果您已经在项目的入口文件中执行了createReduxStore({})函数，那么每个模型中的Reducer都将自动注入到store中。

利用接口.data属性，我们可以轻松地拿到reducer的数据。现在，我们可以快速地执行模型中的Action方法：

  1. console.log(firstModel.data.counter); // counter === 0
  2.  
  3. firstModel.increase(); // counter === 1

通过执行Action，我们轻而易举地改变了reducer的值，高效，快速，代码十分简洁。

你可能会疑惑，reducer中的state是不可变的，直接变更state，React组件能正常re-render吗？不用担心，框架使用了mvvm的特性，一旦发现state变更，就会返回新的对象，React组件能正常渲染。

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

不带Reducer的Model

TODO