rstacruzdeku-stateful
Keep state in Deku components
Deku v2 has no states in components. This is a higher-order component that adds state and setState to the model.
See this conversation here.
Compatible with Deku 2.0.0 (tested with 2.0.0-rc11) and Decca 2.0.0.
import stateful from 'deku-stateful'
function initialState () {
return { clicked: 0 }
}
function render ({ getState, setState }) {
return <div>
Clicked { getState().clicked } times.
<button onClick={ () => setState({ clicked: getState().clicked + 1 }) }>
Click me
</button>
</div>
}
export default stateful({ initialState, render })Example
API
render, onCreate, onUpdate, onRemove
The render function and the lifecycle hooks will also be passed getState and setState.
function render({ getState, setState }) {
}setState(object)— Updates the state when called. WhensetStateis ran, it will queue up changes and dispatch an event likedispatch({ type: 'UI_STATE_CHANGE' }). This is meant to be picked up by your Redux store, which we're assuming will retrigger arender()when called.getState()— Returns the current state.state— The current state; it's preferred to usegetState()instead, but it's here for legacy compatibility.
initialState
Your component can have an initialState function. Return the first state here.
function initialState ({ props }) {
return { clicked: false }
}
export default stateful({ initialState, render })Thanks
deku-stateful © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz