Context.consume()

An HOC. Curried. Accepts an optional mapStoreToProps parameter. Wraps the given component in the Context's Consumer.

Will throw an error if the resulting component is not used as a descendant of the Context's Provider. See the Consumer doc for details.

Definition

(
  mapStoreToProps?: string
    | string[]
    | ((store: WrappedStateContainer) => Object)
) => (component: ComponentType) => Component

See the WrappedStateContainer type

Examples

The different overloads:

// Passes each property of the store as a prop on the wrapped
// component. Not ideal, as this clobbers the prop namespace.
// Also definitely can't be composed with other consume() :(
Context.consume()

// Passes the store as a single prop of the wrapped component.
Context.consume('storePropName')

// Plucks properties off the store and passes them as props
// with the same name to the wrapped component.
Context.consume([ 'dispatch', 'getState' ])

// Aliases store properties as prop names. Useful for preventing
// name collisions when consuming multiple contexts.
Context.consume({
  state: 'todosState', // reads "consume 'state' as 'todosState'"
  setState: 'setTodosState'
})

// Manually map props to values from the store. Similar to
// `connect()` from React Redux.
Context.consume(storeApi => ({
  todosState: storeApi.getState(),
  todos: storeApi.selectTodos()
}))

All above overloads also apply to Context.inject().

The consume HOC is useful for composing Consumers together:

import { compose } from 'zedux'
import HelloContext from '../contexts/HelloContext'
import WorldContext from '../contexts/WorldContext'

const HelloWorld = compose(
  HelloContext.consume('helloStore'),
  WorldContext.consume('worldStore')
)(
  ({ helloStore, worldStore }) =>
    `${helloStore.state} ${worldStore.state}`
)

This example is equivalent to:

import { compose } from 'zedux'
import HelloContext from '../contexts/HelloContext'
import WorldContext from '../contexts/WorldContext'

const HelloWorld = () => (
  <HelloContext.Consumer>
    {helloStore => (
      <WorldContext.Consumer>
        {worldStore =>
          `${helloStore.state} ${worldStore.state}`
        }
      </WorldContext.Consumer>
    )}
  </HelloContext.Consumer>
)