Context.Consumer

A React component. Consumes the provided observable.

Consumers must appear as descendants of the Context's Provider or React Zedux will throw an error.

Definition

export interface Consumer extends Component<{
  children: (value: WrappedStateContainer) => ReactNode
}, {}> {}

children – A render prop! Required. A function that will receive the WrappedStateContainer of the provided observable and should return a React node or array of nodes.

Provider-less Consumers

If the Provider is not an ancestor of the Consumer, React Zedux will throw an error:

import { render } from 'react-dom'
import RootContext from '../contexts/RootContext'

const HelloWorld = () => (
  <Context.Consumer>
    {store => store.getState()}
  </Context.Consumer>
)

const App = () => (
  <HelloWorld />
)

render(
  <App />,
  document.getElementById('root')
)

// Throws ReferenceError

This is for your safety. ;) If you really want to provide and consume the store, either explicitly include the <Context.Provider> or use <Context.Injector> instead.

React Zedux requires you to explicitly include the Provider to avoid unexpected behavior in the case of component-bound stores. If you want a new store created every time component X is mounted, then explicitly include the Provider there. Otherwise, include the Provider higher up in the component hierarchy.

Examples

Simple example. Provide the Context at the app level. Consume the Context wherever.

import { createContext } from 'react-zedux'
import { createStore } from 'zedux'

const Context = createContext(
  createStore().hydrate('hello world')
)

const HelloWorld = () => (
  <Context.Consumer>
    {store => store.getState()}
  </Context.Consumer>
)

const App = () => (
  <Context.Provider>
    <HelloWorld />
  </Context.Provider>
)