Actions

[finom]

There is no such thing as "action". Instead of them you can define class methods that modify data and corresponding components that use useChange or useValue listening that data are going to react accourdingly.

...
const MyComponent = (): ReactElement => {
  const [count, setCount] = useChange(({ foo }: RootStore) => foo, 'count');
  ...

class Foo {
  public count = 0;

  // this is the "action" itself
  doSomething() {
    // MyComponent listens to the property changes
    this.count++;
  }
}

export class RootStore {
  foo = new Foo();

  constructor() {
    // call the "action" (the method) every 1 second
    setTinterval(() => {
      this.foo.doSomething();
    }, 1000);
  }
}

export default new RootStore();

You can also call the "action" at component with the help of useSilent hook if you don't want to export store object (exporting store itself is not prohibited but also is not recommended).

const MyComponent = (): ReactElement => {
  const doSomething = useSilent(({ foo }: RootStore) => foo, 'doSomething');
  
  return (
    <Button onClick={() => doSomething()}></Button>
  );
}

Plus to that you can get the store using React.useContext with use-change Context, then call the "action" by accessing it directly. It's recommended to use useSilent thought as a safer alternative to avoid direct store modifications within components.

import React, { useContext } from 'react';
import { Context as UseChangeContext } from 'use-change';
import { RootStore } from './store';

const MyComponent = () => {
  const store = useContext<RootStore>(UseChangeContext);
  return (
    <Button onClick={() => store.foo.doSomething()}></Button>
  );
}