Using with other libraries

Genshi is written in TypeScript and can be used with any JavaScript framework or library.

If you are using a library that is not officially supported, you can still use Genshi with it. You will have to create your library-specific bindings to work with the library.

Installation

To use Genshi with other libraries, you need to install the core package using your favorite package manager.

1
npm i @genshi/core

1
yarn add @genshi/core

1
pnpm add @genshi/core

Usage

Genshi provides a Store class that you can use to create a store for your application. Everything you need to manage your application state is provided by the Store class.

Creating our store

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

1
import { Store } from "@genshi/core";
2

3
const store = new Store({
4
  count: 0,
5
});

The Store class creates an instance of the store. It also provides methods to define and dispatch 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 your application

Now that we have defined our actions and effects, we can use the store in our application.

In this case, we will consider a simple counter application built in React, that uses the @genshi/core package directly.

1
function Counter() {
2

3
  const [count, setCount] = useState(store.getState().count);
4

5

6
  useEffect(() => {
7
    const listener = store.subscribe((state) => {
8
      setCount(state.count);
9
    });
10

11
    return listener.remove;
12
  }, []);
13

14

15
  useEffect(() => {
16
    store.dispatch(tick);
17
  }, []);
18

19

20
  const handleIncrement = () => {
21
    store.dispatch(increment);
22
  };
23

24
  return (
25
    <>
26
      <button onClick={handleIncrement}>Increment</button>
27
      <p>The count is: {count}</p>
28
    </>
29
  );
30
}