Observable contexts for React

Why

Observable primitives are typically organised in a global context. With impact-react-store you can organise any observable primitives and the related state management with React contexts.

Read more about impact-react and how to use nested stores.

Install

1npm install impact-react-store

Configure store

To use observable primitives with the React context you need to configure the props so that they also become observable. When React reconciles the props passed into the store might change, which you will be able to observe.

• mobx
• jotai
• legend

mobx

1import { configureStore } from "impact-react-store";
2import { observable } from "mobx";
3
4export const createStore = configureStore((prop) => {
5  const box = observable.box(prop);
6
7  return {
8    get() {
9      return box.get();
10    },
11    set(newProp) {
12      box.set(newProp);
13    },
14  };
15});

There is no change to the typing.

jotai

1import { configureStore } from "impact-react-store";
2import { atom } from "jotai";
3
4export const createStore = configureStore((prop) => {
5  const value = atom(prop);
6  const getter = atom((get) => get(value));
7
8  return {
9    get() {
10      return getter;
11    },
12    set(newProp) {
13      value.set(newProp);
14    },
15  };
16});

Type the props as type Props = { foo: Atom<string> }

Legend

1import { configureStore } from "impact-react-store";
2import { observable, computed } from "@legendapp/state";
3
4export const createStore = configureStore((prop) => {
5  const value = observable(prop);
6  const getter = computed(() => value.get());
7
8  return {
9    get() {
10      return getter;
11    },
12    set(newProp) {
13      value.set(newProp);
14    },
15  };
16});

Type the props as type Props = { foo: ObservableComputed<string> }