Using with React

Genshi comes with an official React integration that allows you to use Genshi with React.

Installation

You can install the React integration using your favorite package manager.

1
npm i @genshi/react

1
yarn add @genshi/react

1
pnpm add @genshi/react

Usage

To use Genshi with React, you need to create a store using the createStore function from the @genshi/react package.

The React integration provides a single createStore function that provides bindings to work with React components and lifecycle. Otherwise, this binding re-exports everything from the core package.

Creating our store

First, let’s create a store with an initial state.

1
import { createStore } from "@genshi/react";
2

3
const [useStore, store] = createStore({
4
  count: 0,
5
});

The createStore function returns a tuple with an instance of Store class and the useStore hook.

Now, we can define our actions and effects.

Defining actions

The action method on the store instance is used to define an action. The action function takes the current state as an argument and returns the new state.

1
const increment = store.action("increment", ({ state }) => ({
2
  ...state,
3
  count: state.count + 1,
4
}));

The above action increments the count by 1.

Defining effects

The effect method on the store instance is used to define an effect. The effect function provides many properties to ease managing effects. One such property is the dispatch method, which can be used to dispatch other effects or actions.

1
const tick = store.effect("tick", ({ dispatch }) => {
2
  setInterval(() => {
3
    dispatch(increment);
4
  }, 1000);
5
});

The above effect dispatches the increment action every second.

Using the store in a component

The createStore function returns a tuple with an instance of Store class and the useStore hook. You can use the useStore hook to access the store in your components to use the state and dispatch any actions or effects.

1
function Counter() {
2

3
  const [count, dispatch] = useStore((s) => s.count);
4

5

6
  useEffect(() => {
7
    dispatch(tick);
8
  }, []);
9

10

11
  const handleIncrement = () => {
12
    dispatch(increment);
13
  };
14

15
  return (
16
    <>
17
      <button onClick={handleIncrement}>Increment</button>
18
      <p>The count is: {count}</p>
19
    </>
20
  );
21
}

Dealing with payloads

A common use case is to pass a payload to an action or an effect. Genshi comes with first-class support for payloads.

First, lets add a new action to add 10 to the count.

1
const add = store.action("add", ({ state, payload }) => ({
2
  ...state,
3
  count: state.count + payload,
4
}));

Then, we can dispatch this new action with the payload.

10 collapsed lines
1
function Counter() {
2
  const [count, dispatch] = useStore((s) => s.count);
3

4
  useEffect(() => {
5
    dispatch(tick);
6
  }, []);
7

8
  const handleIncrement = () => {
9
    dispatch(increment);
10
  };
11

12
  const handleAdd = () => {
13
    dispatch(add, 10)
14
  }
15

16
  return (
17
    <>
18
      <button onClick={handleIncrement}>Increment</button>
19
      <button onClick={handleAdd}>Add 10</button>
20
      <p>The count is: {count}</p>
21
    </>
22
  );
23
}

Here, we are using the dispatch method to dispatch the add action with a payload of 10.