Api Suggestion

[samonxian]

What about the usage below.
We can use the action function directly from the create instance everywhere we want, not just in react function component.

const store = create((set) => {
  return {
    count: 0,
    increase(params: { by: number }) {
      set((state) => {
        return {
          count: state.count + params.by,
        };
      });
    },
    decrease(params: { by: number }) {
      set((state) => {
        return {
          count: state.count - params.by,
        };
      });
    },
  };
});

function Demo() {
  const count = countStore.useStore((state) => state.count);
  const onIncrease = () => {
    countStore.increase({ by: 1 });
  };
  const onDecrease = () => {
    countStore.decrease({ by: 1 });
  };
  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    </div>
  );
}

[dbritto-dev]

@samonxian that's ok is called no store actions

[dai-shi]

You can do like this:

const store = create((set) => {
  return {
    count: 0,
    increase(params: { by: number }) {
      set((state) => {
        return {
          count: state.count + params.by,
        };
      });
    },
    decrease(params: { by: number }) {
      set((state) => {
        return {
          count: state.count - params.by,
        };
      });
    },
  };
});

function Demo() {
  const count = countStore.useStore((state) => state.count);
  const onIncrease = () => {
    countStore.getState().increase({ by: 1 });
  };
  const onDecrease = () => {
    countStore.getState().decrease({ by: 1 });
  };
  return (
    <div>
      <div>{count}</div>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    </div>
  );
}