0.1.0-alpha.0 • Published 2 years ago
@bbc/search-complete v0.1.0-alpha.0
Lightweight React Application State Management
Lauf Store React
Logo - Diego Naive, Noun Project.
Install
npm install @lauf/store-react --save
@lauf/store-react
enables React apps to use @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 Counter example below shows how useSelected
binds a selected part of a
Store
's state to a component, and how events can edit
the state.
You can see the app running in an online sandbox; in javascript, or in typescript.
App Behaviour
AppState
defines the state structure for the Store.StoreProps
passes theStore
to React components.- The
Display
React component has auseSelected
hook to re-render whencounter
changes. - The
Increment
andDecrement
buttons don't re-render on any state changes, but they DO trigger anedit
to thecounter
state when clicked. App
callsuseStore
passing in anINITIAL_STATE
to initialise aStore
on first load.App
inserts the three components, passing each one the store to do its work.
import React from "react";
import ReactDOM from "react-dom";
import { Store, Immutable } from "@lauf/store";
import { useStore, useSelected } from "@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")
);
0.1.0-alpha.10
2 years ago
0.1.0-alpha.9
2 years ago
0.1.0-alpha.8
2 years ago
0.1.0-alpha.7
2 years ago
0.1.0-alpha.6
2 years ago
0.1.0-alpha.5
2 years ago
0.1.0-alpha.4
2 years ago
0.1.0-alpha.3
2 years ago
0.1.0-alpha.2
2 years ago
0.1.0-alpha.0
2 years ago