<SubspaceProvider mapState namespace>

A react-redux compatible React component that creates a subspace store for any children of it..

Props

1. mapState (Function|string): A selector to derive the state of the subspace. The selector is provided the parent state as the first parameter and the root state as the second parameter. If passed as a string, a selector is created for that key on the provided state.
2. namespace (string): An optional namespace to scope actions with.
3. context (React.Context|Object): Override the React Context used for accessing the store. An object can be passed with separate parent and child contexts if required.

If mapState is passed as a string and no namespace is provided, the provided string is used for both. To prevent this, pass null as the namespace prop.

Examples

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider mapState={(state) => state.subApp}>
        <AComponent />
      </SubspaceProvider>
    )
  }
}

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider mapState={(state, rootState) => ({ ...state.subApp, root: rootState })}>
        <AComponent />
      </SubspaceProvider>
    )
  }
}

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider mapState={(state) => state.subApp} namespace="subApp">
        <AComponent />
      </SubspaceProvider>
    )
  }
}

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider mapState="subApp" namespace="subAppNamespace">
        <AComponent />
      </SubspaceProvider>
    )
  }
}

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider mapState="subApp">
        <AComponent />
      </SubspaceProvider>
    )
  }
}

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

const CustomReduxContext = React.createContext()

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider mapState={(state) => state.subApp} namespace="subApp" context={CustomReduxContext}>
        <AComponent />
      </SubspaceProvider>
    )
  }
}

import React from `react`
import { SubspaceProvider } from 'react-redux-subspace'
import AComponent from 'somewhere'

const CustomParentContext = React.createContext()
const CustomChildContext = React.createContext()

class MyComponent extends React.Component {
  render() {
    return (
      <SubspaceProvider
        mapState={(state) => state.subApp}
        namespace="subApp"
        context={{ parent: CustomParentContext, child: CustomChildContext }}
      >
        <AComponent />
      </SubspaceProvider>
    )
  }
}