How to define multiple contexts with jotai?

[andreas-soroko]

Hey everyone,

i am currently investigating jotai for me and have a question I could not figure out.

how would this example looks like with jotai?

(modified example code from zustand)

import create from "zustand";
import createContext from "zustand/context";

const { Provider: ButtonProvider, useStore: useButtonStore } = createContext();
const { Provider: AppProvider, useStore: useAppStore } = createContext();

const createAppStore = () =>
  create((set) => ({
    userName: 'Max'
  }));

const createButtonStore = () =>
  create((set) => ({
    bears: 0,
    increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
    removeAllBears: () => set({ bears: 0 })
  }));

function ButtonWithoutProvider() {
  const state = useButtonStore();
  const appState = useAppStore();

  return (
    <div>
     {appState.userName}: {state.bears}
      <button
        onClick={() => {
          state.increasePopulation();
        }}
      >
        +
      </button>
    </div>
  );
};

function Button() {
  return (
    <ButtonProvider createStore={createButtonStore}> 
      <ButtonWithoutProvider />
    </ButtonProvider>
  );
};

function AppWithoutProvider() {
  const appState = useAppStore();

  return (
    <div className="App">
      <p> user: {appState.userName}
      <Button />
      <Button />
    </div>
  );
}

export default function App() {
  return (
    <AppProvider createStore={createAppStore}>
      <AppWithoutProvider />
    </AppProvider>
  );
}

[andreas-soroko]

hups, noticed i tested with jotai 0.6.2, updating to 1.2.2 and it works as expected....