Simple, Immutable and memory efficient state manager.
Supports only the latest browsers.
// STATE.ts
import { proxify } from "lape";
export interface State {
count: number;
deep: {
nest: boolean;
};
}
const defaultState: State = {
count: 0,
deep: {
nest: true
}
};
export default proxify(defaultState);
// APP.tsx
import state from '@state' // using ts paths here
const action = () => {
state.count += 1;
};
class App extends React.Component {
render() {
return <div onClick={action}>{state.count}</div>;
}
}
export default connect(App)
Every app consists of 3 parts:
- State - a simple JSON structure
- Side-effects - rendering to DOM, fetching from server, setting timers, etc.
- Events - functions that change the state
State can be any JSON structure that is passed into a proxify
function. The proxify
function transparently wraps all of your data and emits events on any Get or Set operations.
Note:
- don't put derived state* / cache into your real state, always derive it from the "base" state with functions
- don't put functions into state.
* Derived state is any state that can be calculated from another state
connect
is a small wrapper around your component that records any Get operations from state. If any event changes the tracked state, the component will trigger it's render function.
Not implemented yet, use promises or async/await
Events is a function that mutates the state. Don't trigger it while doing side-effects or it might loop. Every side effect that used the changed state will update automatically.
- You don't need to connect every component, connect the root one is fine, adding more is just an optimisation
- The end nodes, like strings/numbers/booleans, are not proxies, so don't do
string = 'abc'
, have at least one parentstate.string = 'abc''
- Don't mutate the state in render (same as setState())