React context comparison

Signature

React.createContext(defaultValue: any)

vs.

ReactZedux.createContext(stateContainer: StateContainer)

See the StateContainer type

Consumption

React:

import { createContext } from 'react'

const Context = createContext('default value')

const SomeComponent = () => (
  <Context.Consumer>
    {console.log}
  </Context.Consumer>
)

// logs 'default value'

React Zedux:

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

const Context = createContext(createStore())

const SomeComponent = () => (
  <Context.Consumer>
    {console.log}
  </Context.Consumer>
)

// Throws ReferenceError

React allows a Context's Consumer to be used without its Provider.

React Zedux will throw an error if a <Consumer> is used without its matching <Provider>. This is safer than having a silent failover case. If you really want to provide and consume the store, either explicitly include the <Provider> or use the <Injector> instead.

The Context object

React.createContext() returns an object with two properties:

import { createContext } from 'react'

const Context = createContext('default value')

Context.Provider // a React component
Context.Consumer // a React component

ReactZedux.createContext() also returns an object with those 2 properties. But it adds a little sugar too:

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

const Context = createContext(createStore())

Context.Provider // a React component
Context.Consumer // a React component
Context.Injector // a React component

Context.provide // an Higher-Order Component
Context.consume() // an Higher-Order Component
Context.inject() // an Higher-Order Component

These other properties are just for convenience. See the Context type for more info.

Notes

Note that Context.provide is not curried like the other HOCs.