Decorate your route with the ability to transition between (internal) states. That state will be purged upon entering and exiting the route so you do not need to manage it.
Here's an example that tracks an internal counter and outputs it to the console when it changes:
import { withState } from 'page-fu';
export default withState({
getInitialState() {
return { value: 0 };
},
enter() {
this.renderValue(); // => "Value = 0"
this.increment();
},
stateDidChange() {
this.renderValue(); // => "Value = 1"
},
renderValue() {
console.log('Value = %d', this.state.value)
},
increment() {
this.setState({
value: this.state.value + 1
});
}
})Freeze the state and all changes to it throughout a function. All calls to withState#setState and withState#replaceState will be buffered until the function returns, at which point they will be "replayed" but cause only one change to be triggered (withState#stateDidChange.)
route | Route |
f | Function |
A producer for the initial state the container should start in. The output of this method will be used when clearing the container as well.
ObjectThe initial state definition. |
Transition to a new state, overwriting any existing keys.
partialState | Object |
Transition to an entirely new state, replacing the old one.
newState | Object |
A hook that is invoked when the state changes through calls to withState#setState, withState#replaceState or withState#clearState.
prevState | Object |