plume2基础使用复习

1.什么是plume2?

plume2 是和 redux 的作用是一样的，都是对于数据状态上的管理

2. plume2 中必不可少的文件？

store:

    1.作用：用于聚合actor(类似redux中的reducers)以及派发事件
     2.需要用的方法：
         1.bindActor(){}  ==> 用于聚合 actor
         eg:
             bindActor() {
             return [new commActor()]
             }
         2.dispatch('唯一标识名称',[数据]) ==> 用于派发事件
         eg:
             this.dispatch('login:addInfo',data)

actor:

 1.作用：用于处理数据操作类似于redux的reducers
      2.需要用到的方法：
          1.defaultState ==> 存储默认数据
              eg:
                 defaultState() {
                     return {
                         CountNum: 0
                     }
                  }
           2. Action ==> 用于监听派发事件
               eg：
                   @Action('login:addInfo')
                   addInfo(state:IMap,count){
                       return state.set('CountNum',count)
                   }

3.案例代码

1. 文件目录如下

       +login
         ++actor  
             +++ comm-actor.ts
         ++index.tsx
         ++store.ts

2. 文件代码 index.tsx

import * as React from 'react';
import { StoreProvider } from 'plume2';
import AppStore from './store';

//关联 AppStore
@StoreProvider(AppStore, { debug: __DEV__ })
//创建一个类组件
export default class Login extends React.Component<any, any> {
  // 设置Appstore别名
  store: AppStore;
  render() {
     // 方法和数据都是从 Appstore 中拿到的
     //获取数据
    const countNum = this.store.state().get('CountNum');
     //获取方法
    let addNum = this.store.addNum;
    let subNum = this.store.subNum;
    return (
      <div>
        <button onClick={addNum}>+1</button>
        <p>count:{countNum}</p>
        <button onClick={subNum}>-1</button>
      </div>
    )
  }
}

store.ts

import { Store } from 'plume2';

//需要被聚合的 actor
import commActor from './actor/comm-actor';

//创建一个类组件继承Store
export default class AppStore extends Store {

//聚合 actor
  bindActor() {
    return [new commActor()];
  }
//执行的方法
  addNum = () => {
    let num = this.state().get('CountNum') + 1
    this.dispatch('login:addNum', num)
  }
subNum = () => {
    let num = this.state().get('CountNum') - 1
    this.dispatch('login:subNum', num)
  }
}

comm-actor.ts

import { Action, Actor, IMap } from 'plume2';

//在actor里面定义 页面组件需要改变的state数据
export default class CounterActor extends Actor {
  defaultState() {
    return {
      CountNum: 0 //CountNum 初始值
    };
  }
  /**
   * Action消息响应函数
   * 响应store dispatch 的 'login:setLoading' 然后设置state的loading的值
   * 这里的state是immutable 的数据类型
   * @param state
   * @return state
   */
  @Action('login:addNum')
  addNum(state: IMap, count) {
    return state.set('CountNum', count);
  }
  @Action('login:subNum')
  subNum(state: IMap, count) {
    return state.set('CountNum', count);
  }
}

4.数据流程

    index.tsx 中触发一个方法后 ----->  到 store.ts 中找到该方法 , 执行 dispatch派发事件
          /|\                                                   |
           | 新                                                 |事
           |                                                    |
           | 更                                                 |件
           |                                                    |
           | 发                                                 |派
           |                                                    |
           | 触                                                 |发
           |                                                   \|/
       默认数据  <----------------  actor.ts中的 @Action会监听到事件的派发，然后执行对应操作
                     数 据 修 改