Migrating.md

Migrating

There were some significant breaking changing introduced in version 2 of redux-subspace. These were mostly caused by seperating the library up into multiple packages for use with different frameworks, or by utilising the new middleware pipeline for subspaces.

The following sections describe the major changes from redux-subspace version 1 to 2.

React bindings

The React binding have moved from the redux-subspace package to react-redux-subspace.

Firstly, you must install the new package:

npm i -S react-redux-subspace

SubspaceProvider

-import { SubspaceProvider } from 'redux-subspace'
+import { SubspaceProvider } from 'react-redux-subspace'

subspaced

-import { subspaced } from 'redux-subspace'
+import { subspaced } from 'react-redux-subspace'

Namespaced Reducers

The namespaced higher-order reducer has had it's signature changed to be more composable with other higher-order reducers:

import { combineReducers } from 'redux'
import { namespaced } from 'redux-subspace'

const reducer = combineReducers({
-  myReducer: namespaced(myReducer, 'myNamespace')
+  myReducer: namespaced('myNamespace')(myReducer)
})

redux-thunk

In version 1, redux-thunk was implicilty supported as a hard-coded behaviour. With the introduction of a middleware pipeline to redux-subspace, redux-thunk must now be applied as middleware to the store.

Assuming you already had redux-thunk installed and applied to your root store, you only need change it to apply the middleware to subspaces as well.

To apply the middleware to subspaces, an alternative applyMiddleware function is provided by redux-subspace:

-import { createStore, applyMiddleware } from 'redux'
+import { createStore } from 'redux'
+import { applyMiddleware } from 'redux-subspace'
import thunk from 'redux-thunk'

const store = createStore(reducer, applyMiddleware(thunk))

Middleware applied to subspaces will also be applied to the root store, so there is no need to apply it twice.

The root node

The root node is no longer appended to the subspace state. The same functionality can be obtained from the redux-subspace-wormhole middleware.

Firstly, install the middleware:

npm i -S redux-subspace-wormhole

Then we must apply the middleware to the subspaces using applyMiddleware provided be redux-subspace:

import { createStore } from 'redux'
+import { applyMiddleware } from 'redux-subspace'
+import wormhole from 'redux-subspace-wormhole'

-const store = createStore(reducer)
+const store = createStore(reducer, applyMiddleware(wormhole((state) => state, 'root')))

Global Actions

The GlobalActions.register function has been replaced by a globalActions middleware:

import { createStore } from 'redux'
-import { GlobalActions } from 'redux-subspace'
+import { applyMiddleware, globalActions } from 'redux-subspace'

-GlobalActions.register('GLOBAL_ACTION')

-const store = createStore(reducer)
+const store = createStore(reducer, applyMiddleware(globalActions('GLOBAL_ACTION')))

The asGlobal action wrapper has also been renamed to globalAction to be more consistent with the new action wrappers:

-import { asGlobal } from 'redux-subspace'
+import { globalAction } from 'redux-subspace'

-store.dispatch(asGlobal({ type: 'GLOBAL_ACTION' }))
+store.dispatch(globalAction({ type: 'GLOBAL_ACTION' }))