Context.inject()

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

Unlike Context.consume(), will not throw an error if the Context's Provider is not an ancestor of the injected component. This is because injected components get their own Providers.

Definition

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

Exactly the same as Context.consume(). See that doc page for details on this HOC's overloads.

Examples:

The following examples are all equivalent:

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

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

or without using inject():

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

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

or without using HOCs:

import HelloContext from '../contexts/HelloContext'
import WorldContext form '../contexts/WorldContext'

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

or just being lame:

import HelloContext from '../contexts/HelloContext'
import WorldContext form '../contexts/WorldContext'

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