redux-subspace

This is a library to help build decoupled, componentized Redux apps that share a single global store.

Installation

npm install --save redux-subspace react-redux-subspace

Quick Start

import React from 'react'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { namespaced } from 'redux-subspace'
import { SubspaceProvider } from 'react-redux-subspace'
import { TodoApp, todoReducer } from './todoApp'
import { CounterApp, counterReducer } from './counterApp'

const rootReducer = combineReducers({
  todo: todoReducer
  counter1: namespaced('counter1')(counterReducer),
  counter2: namespaced('counter2')(counterReducer)
})

const store = createStore(rootReducer)

const App = () => (
  <Provider store={store}>
    <SubspaceProvider mapState={(state) => state.todo}>
      <TodoApp />
    </SubspaceProvider>
    <SubspaceProvider mapState={(state) => state.counter1} namespace="counter1">
      <CounterApp />
    </SubspaceProvider>
    <SubspaceProvider mapState={(state) => state.counter2} namespace="counter2">
      <CounterApp />
    </SubspaceProvider>
  </Provider>
)

Documentation

Packages

redux-subspace: The core package for Redux Subspace
react-redux-subspace: React bindings compatible with react-redux
redux-subspace-loop: Utilities for integrating with redux-loop
redux-subspace-observable: Utilities for integrating with redux-observable
redux-subspace-saga: Utilities for integrating with redux-saga
redux-subspace-wormhole: Middleware for exposing additional state to subspaces

Upgrading From Version 1 to Version 2

When upgrading to version 2 of Redux Subspace, refer to the migration guide to work through all the breaking changes.

Media

The MelbJS presentation that launched this library - Scaling React and Redux at IOOF.