@a-react-kit/controllers 中文文档教程

发布于 5年前 浏览 26 更新于 3年前

@a-react-kit/controllers

Hoc example

import { createStore, watcherEvent, withController, Controller } from '@a-react-kit/controllers';


class ExampleController extends Controller<ExampleData, ExampleData, ExampleEvents, any> {
  initialize = async () => {
    return { foo: 'bar' };
  };

  bootstrap = initialState => {
    const exampleEvent = (store, payload) => {
      const anotherPayload = this.getController(AnotherController);

      return {
        ...store,
        ...payload,
        ...anotherPayload
      };
    };

    this.store = createStore(initialState);
    this.events = {
      exampleEvent: watcherEvent(exampleEvent),
    };
  };
}

export default withController([ExampleController])(DumbComponent);

Hooks

import { useStoreAndEventsOf, useStoreOf, useEventsOf } = '@a-react-kit/controllers';

function DumbComponent() {
  const [store, events] = useStoreAndEventsOf(ExampleController);
  // Or
  const store = useStoreOf(ExampleController);
  const events = useEventsOf(ExampleController);

  return <>
    <div>{store.foo}</div>
      <button type="button" onClick={events.exampleEvent} />
  </>;
} 

@a-react-kit/controllers

Hoc example

import { createStore, watcherEvent, withController, Controller } from '@a-react-kit/controllers';


class ExampleController extends Controller<ExampleData, ExampleData, ExampleEvents, any> {
  initialize = async () => {
    return { foo: 'bar' };
  };

  bootstrap = initialState => {
    const exampleEvent = (store, payload) => {
      const anotherPayload = this.getController(AnotherController);

      return {
        ...store,
        ...payload,
        ...anotherPayload
      };
    };

    this.store = createStore(initialState);
    this.events = {
      exampleEvent: watcherEvent(exampleEvent),
    };
  };
}

export default withController([ExampleController])(DumbComponent);

Hooks

import { useStoreAndEventsOf, useStoreOf, useEventsOf } = '@a-react-kit/controllers';

function DumbComponent() {
  const [store, events] = useStoreAndEventsOf(ExampleController);
  // Or
  const store = useStoreOf(ExampleController);
  const events = useEventsOf(ExampleController);

  return <>
    <div>{store.foo}</div>
      <button type="button" onClick={events.exampleEvent} />
  </>;
} 
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文