@noix/model-react v0.1.1

@noix/model-react

Adapter for @noix/model with react

Prerequisite

If you want use model, you need to wrap the component where you call related methods inside Container and use useModel/useDispatch to get the API.

//App.jsx
export const App = () => {
  return (
    <Container models={[demo]}>
      <Counter />
    </Container>
  );
};

//Counter.jsx
export const Counter = () => {
  const count = useModel("demo/count");
  const addCount = useDispatch("demo/addCount");
  return <button onClick={() => addCount()}>{count}</button>;
};

// demo.js
export const demo = {
  name: "demo",
  state: {
    count: 0,
  },
  effect: {
    addCount() {
      this.setField("count", this.state.count + 1);
    },
  },
};