@redux-dynostore/react-redux-subspace
Deprecated
This library is no longer being actively maintained.
IOOF has been slowly moving away from the ubiquitous use of Redux as a core piece of our micro-frontend architecture and have been actively replacing the usage of this library with more standard React and JavaScript patterns. Due to some technical constraints, we've also been unable to upgrade to the latest version of the library ourselves for quite some time now, further fuelling our desire to move away from this solution.
At this time, we will be ceasing all maintenance tasks and we recommend that you consider using an alternative library:
If you want to continue using this library, we encourage you to fork this repo and take over maintenance yourself.
Enhancer for mounting React components within subspaces when using redux-dynostore.
Usage
import dynamic from '@redux-dynostore/react-redux'
import subspaced from '@redux-dynostore/react-redux-subspace'
export default dynamic('identifier', subspaced())(MyComponent)Options
subspaced accepts options to modify it's behaviour. Default options can be overridden when using the subspaced handler:
import dynamic from '@redux-dynostore/react-redux'
import subspaced from '@redux-dynostore/react-redux-subspace'
export default dynamic(
'identifier',
subspaced({
/* options */
})
)(MyComponent)
withExtraState
export default dynamic(
'identifier',
subspaced({
mapExtraState: (state, rootState) => ({
/* ... */
})
})
)(MyComponent)When mounted, MyComponent will be wrapped in a SubspaceProvider.
If you are attaching a reducer dynamically, you should use the redux-subspace variant to ensure it will receive the namespaced actions.
stateHandler
const store = createStore(reducer, dynostore(dynamicReducers(), { stateHandler: customStateHandler }))export default dynamic('identifier', subspaced({ stateHandler: customStateHandler }))(MyComponent)The stateHandler option is used to modify the behaviour of subspaced when interacting with the state (accessing it's own state and merging in state returned from the mapExtraState option). They can be used to optimize for different goals, such as accuracy or performance, or to support alternative state structures, such as ImmutableJS.
State handlers are provided as an object with the following functions:
| Name | Description | Example |
|---|---|---|
getValue(state, key) |
Selects a value from the state | (state, key) => state[key] |
canMerge(state) |
Check if the state is of a mergable type | (state) => state && typeof state === 'object' && !Array.isArray(state) |
merge(oldState, newState) |
Merges the new state and old state into a new state | (oldState, newState) => ({ ...oldState, newState }) |
Note, this is a subset of the stateHandler option of dynamicReducers.
By default, subspaced will use the defaultStateHandler exported from the core package.
Additional Subspace Options
Any additional options provided to subspaced will be passed through as the options argument to the underlying react-redux-subspace library. This is most commonly used to provide a custom context to locate the Redux store to use:
const CustomContext = React.createContext
// ...
export default dynamic('identifier', subspaced({ context: CustomContext }))(MyComponent)