This is document number 3
Example explained:
Every app consists of 3 parts:
- State - a simple JSON structure
- React Components
- Events - functions that change the state
State
State can be any JSON structure that is passed into a lape
function. The lape
function transparently wraps your data and tracks every Get and Set operation.
React
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 its render function.
Events
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.
Pro tips:
- You should
connect
every component that uses global state, connecting just the root is fine, but connecting more is a good optimisation - Don't mutate the state in render (same as calling setState(), could cause infinite loops)
- The end nodes, like strings/numbers/booleans, are not proxies, so don't do
lape('abc')
, have at least one parentlape({name: 'abc'})
- Same goes for reassignment:
const state = lape({user: {name: 'abc'}})
let name = state.user.name
name = 'cba' // This will not change the state, only reassign local variable because primitives are immutable in JS
let user = state.user
user.name = 'cba' // This will work as objects are shared by reference