deku-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

• Tabs example
• Simple counter 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. When setState is ran, it will queue up changes and dispatch an event like dispatch({ type: 'UI_STATE_CHANGE' }). This is meant to be picked up by your Redux store, which we're assuming will retrigger a render() when called.
• getState() — Returns the current state.
• state — The current state; it's preferred to use getState() 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