How to use the react-sweet-state.createStore function in react-sweet-state

const initialState: State = {
  color: '',
};

const actions = {
  change: (value?: string) => (
    { setState }: StoreActionApi,
    { defaultColor }: ContainerProps
  ) => {
    setState({
      color: value || defaultColor,
    });
  },
};

const Store = createStore({
  name: 'theme',
  initialState,
  actions,
});

export const ThemeContainer = createContainer(
  Store,
  {
    onInit: () => ({ getState, dispatch }) => {
      // this gets currently called also when component remounts
      // so it is important to check state status and apply default only on first mount
      const { color } = getState();
      if (!color) {
        dispatch(actions.change());
      }
    },

order: getState().order.concat(newTodo.id),
    });
  },

  toggle: (todoId: number) => ({ setState, getState }: StoreApi) => {
    const todo = getState().byId[todoId];
    setState({
      byId: {
        ...getState().byId,
        [todo.id]: { ...todo, isDone: !todo.isDone },
      },
    });
  },
};

const Store = createStore({
  name: 'todos',
  initialState,
  actions,
});

/** Container */

type ContainerProps = {| n: number |};
export const TodosContainer = createContainer(
  Store,
  {
    onInit: () => ({ getState, dispatch }, { n }) => {
      if (getState().order.length) return;
      Array.from({ length: 10 * n }).map((__, i) => {
        const title = `Todo ${n}-${i + 1}`;
        dispatch(actions.add(title));

count: number;
};

const initialState: State = {
  count: 0,
};

const actions = {
  increment: () => ({ setState, getState }: StoreActionApi) => {
    setState({
      count: getState().count + 1,
    });
  },
};

const Store = createStore({
  initialState,
  actions,
});

export const CounterSubscriber = createSubscriber(Store);

export const useCounter = createHook(Store);

type Actions = typeof actions;

const initialState: State = {
  data: [],
  loading: false,
};

const actions = {
  add: (message: string) => ({ setState, getState }: StoreActionApi) => {
    setState({
      data: [...getState().data, message],
    });
  },
};

const Store = createStore({
  name: 'messages',
  initialState,
  actions,
});

export const MessagesSubscriber = createSubscriber(Store);

export const useMessages = createHook(Store);

type Actions = typeof actions;

const initialState: State = {
  count: 0,
};

const actions = {
  increment: () => ({ setState, getState }: StoreActionApi) => {
    setState({
      count: getState().count + 1,
    });
  },
};

const Store = createStore({
  initialState,
  actions,
});

export const CounterSubscriber = createSubscriber(Store);

export const useCounter = createHook(Store);

import React, { useTransition } from 'react';
import { createStore, createHook } from 'react-sweet-state';

import {
  syncBlock,
  useRegisterIncrementDispatcher,
  initialState,
  reducer,
  ids,
  useCheckTearing,
  shallowEqual,
} from '../common';

const Store = createStore({
  initialState,
  actions: {
    dispatch: (action) => ({ setState, getState }) => {
      setState(reducer(getState(), action));
    },
  },
});

const useCounter = createHook(Store);

const Counter = React.memo(() => {
  const [state] = useCounter();
  const { count } = state;
  syncBlock();
  return <div>{count}</div>;
}, shallowEqual);

},

  send: (message: string) => async ({ setState }: StoreApi) => {
    setState({
      isSending: true,
    });
    await new Promise(r => setTimeout(r, 1000));
    setState({
      isSending: false,
      message: '',
    });
    return message;
  },
};

const Store = createStore({
  name: 'form',
  initialState,
  actions,
});

export const FormContainer = createContainer(
  Store,
  {
    onUpdate: () => ({ setState }, { remoteUsers }) => {
      setState({ toUsers: remoteUsers });
    },
  }
);

export const FormSubscriber = createSubscriber(Store);

createSubscriber,
  createHook,
} from 'react-sweet-state';
import type { State } from './types';

import * as actions from './actions';

type Actions = typeof actions;
type ContainerProps = {| selectedUser: string | null |};

const initialState: State = {
  data: null,
  loading: false,
};

const Store = createStore({
  initialState,
  actions,
});

export const TodoContainer = createContainer(
  Store,
  {
    onUpdate: () => ({ dispatch }, { selectedUser }) => {
      if (selectedUser) dispatch(actions.load(selectedUser));
    },
  }
);

export const TodoSubscriber = createSubscriber(Store);

export const useTodo = createHook(Store);

import type { State } from './types';

import * as actions from './actions';
import * as selectors from './selectors';

type Actions = typeof actions;
type ContainerProps = {||};
type UserSelectedState = $Call;

const initialState: State = {
  selected: null,
  data: null,
  loading: false,
};

const Store = createStore({
  initialState,
  actions,
});

export const UserContainer = createContainer(
  Store,
  {
    onInit: actions.load,
  }
);

export const UserSubscriber = createSubscriber(Store);

export const UserSelectedSubscriber = createSubscriber<
  State,
  Actions,