React context store

A two way binding mechanism that uses React context as a storage machanism.

For small to medium sized apps I found redux to be a bit heavy for what it achieved. In reality, most of the time I want to create a simple website that blocks the form submit as a network call is being processed.

API

There are a few types of store hooks both of which return the current store contents and the available modifiers.

• useContextStore - For non-indexable stores like objects and primatives or when you don't need to edit individual elements
• useIndexableContextStore - For indexable stores like maps or arrays with a single loading state at the root
• useIndexableStatefulContextStore - For indexable stores but when you want to maintain separate load states per item than the list of items

All come with some basic modifiers:

• useUpdateFactory - Used to modify all the values in the store at once. Useful for getAll, deleteAll, modifyAll, etc.
• setContextData - Used to create custom modifiers if for some reason you don't like ours.

They also have the same states:

• unsent - No modifier has acted upon the data
• loading - The modifier has been invoked but the action hasn't completed yet
• success - The action was successful and the data has been updated
• error - The action failed

The useIndexableContextStore and useIndexableStatefulContextStore have additional update factories that allow for creating functions that manipulate individual items:

• useCreateOneFactory - Used to create a new entry - GET and POST calls.
• useDeleteOneFactory - Used to remove an entry - DELETE call
• useUpdateOneFactory - Used to update an existing entry - PUT/PATCH calls

Example usage

The following documentation has been copied out of a test case. If you find that it's not working, please check the test case. This example is an array but you can also use maps, or store a non-indexable type.

First create the context store

1import React, { PropsWithChildren } from "react";
2
3import {
4  ContextStore,
5  getNotImplementedPromise,
6  useIndexableContextStore,
7} from "react-context-store";
8
9export type Item = {
10  id: number,
11  name: string,
12};
13
14type ContextStoreData = Array<Item>;
15
16export type RefreshAllParams = void;
17export interface ContextValue extends ContextStore<ContextStoreData> {
18  refreshAll: (params: RefreshAllParams) => Promise<ContextStoreData>;
19}
20
21const defaultValue: ContextValue = {
22  data: [],
23  refreshAll: getNotImplementedPromise,
24  state: "unsent",
25};
26
27export const Context = React.createContext(defaultValue);
28export type ProviderProps = PropsWithChildren<{}>;
29
30export function ApiProvider(props: ProviderProps) {
31  const { children } = props;
32  const [contextValue, { useUpdateFactory }] = useIndexableContextStore(
33    defaultValue
34  );
35
36  const refreshAll = useUpdateFactory({
37    action: (params: RefreshAllParams) => {
38      return fetchResults(params);
39    },
40  });
41
42  return (
43    <Context.Provider
44      value={{
45        ...contextValue,
46        refreshAll,
47      }}
48    >
49      {children}
50    </Context.Provider>
51  );
52}

Somewhere in your app, setup the shared provider

1import { ApiProvider, Context } from "../context";
2import { List } from "./component";
3
4export function App() {
5  return (
6    <ApiProvider>
7      <List />
8    </ApiProvider>
9  );
10}

And finally consume the context

1import { ApiProvider, Context } from "../context";
2
3export function List() {
4  const { data, refreshAll, state } = useContext(Context);
5
6  useEffect(() => {
7    refreshAll();
8  });
9
10  switch (state) {
11    case "error":
12      return <div>Oh no!</div>;
13    case "success":
14      return (
15        <div>
16          <ul>
17            {data.map((item) => {
18              const { id, name } = item;
19              return <li key={id}>{name}</li>;
20            })}
21          </ul>
22        </div>
23      );
24    default:
25      return <div>Loading</div>;
26  }
27}

For more examples, take a look at our extensive testing suite.