withState

deprecated in favour of useMappedState

Connect a Component to specified global state changes.

Installation

npm install --save @app-elements/with-state

Usage

import withState from '@app-elements/with-state'

// Here is a simple view that expects a `count` value
// form the global state.
const StatefulView = ({ count }) =>
  <div>
    <h1>Count: {count}</h1>
  </div>

// Now we use withState to wrap the StatefulView component
// in a Higher order Component (HoC) that will keep StatefulView
// in sync with changes to `count` in the global state.
const enhance = withState({
  // Define the portion of the global state object that
  // this Component should be synced with.
  mapper: ({ count }) => ({ count })
  // equivalent to:
  // mapper: state => {
  //   return { count: state.count }
  // }
})

// Since withState is a HoC, it returns a function that expects
// to be called with a Component as its only param.
export default enhance(StatefulView)

Props

| Prop | Type | Default | Description | |------------------------|------------|---------------|---------------------| | mapper | Function | None | A function that accepts (state, props) and returns an object