import { useStore } from "effector-react";

React hook, which subscribes to a store and returns its current value, so when the store is updated, the component will update automatically.

Methods

useStore($store): State

Formulae

useStore($store: Store<State>): State

Arguments

1. $store: Store

Returns

(State): The value from the store

Examples

import { createStore } from "effector";
import { useStore, useEvent } from "effector-react";

const $counter = createStore(0);

const { incrementClicked, decrementClicked } = createApi($counter, {
  incrementClicked: (state) => state + 1,
  decrementClicked: (state) => state - 1,
});

const App = () => {
  const counter = useStore($counter);
  const [onIncrement, onDecrement] = useEvent([incrementClicked, decrementClicked]);

  return (
    <div>
      {counter}
      <button onClick={onIncrement}>Increment</button>
      <button onClick={onDecrement}>Decrement</button>
    </div>
  );
};

Try it