@lauf/lauf-store-react v0.1.0-beta.14

State Management for React with Typescript support.

Lauf Store React

Logo - Diego Naive, Noun Project.

@lauf/lauf-store-react enables React apps to use @lauf/lauf-store for state-management, providing a simple substitute for Flux/Redux based on Immer.

Browse the API or the Typescript example inlined below from our Counter App.

The example shows how useSelected can bind part of a Store's state to a component, and how controls can change the state.

• AppState defines the state structure to be managed by the Store.
• StoreProps defines how to pass the Store to React components.
• The Display React component has a useSelected hook to re-render when counter changes.
• The Increment and Decrement buttons don't track any changes, but they do trigger an edit to the counter when clicked.
• App creates the Store with useStore passing in an INITIAL_STATE.
• App inserts the three components, passing each one the store to do its work.

import React from "react";
import ReactDOM from "react-dom";
import { Immutable, Store } from "@lauf/lauf-store";
import { useSelected, useStore } from "@lauf/lauf-store-react";

interface AppState {
  counter: number;
}

const INITIAL_STATE: Immutable<AppState> = {
  counter: 0,
} as const;

interface StoreProps {
  store: Store<AppState>;
}

const Display = ({ store }: StoreProps) => {
  const counter = useSelected(store, (state) => state.counter);
  return <h1>{counter}</h1>;
};

const Increment = ({ store }: StoreProps) => (
  <button
    onClick={() =>
      store.edit((draft) => {
        draft.counter += 1;
      })
    }
  >
    Increase
  </button>
);

const Decrement = ({ store }: StoreProps) => (
  <button
    onClick={() =>
      store.edit((draft) => {
        draft.counter -= 1;
      })
    }
  >
    Decrease
  </button>
);

const App = () => {
  const store = useStore(INITIAL_STATE);
  return (
    <>
      <Display store={store} />
      <Increment store={store} />
      <Decrement store={store} />
    </>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);