README
React Dendrimer
React dendrimer is a higher order component which allows for encapsulation of react-redux apps as controlled components within a larger react application.
Installation:
npm install --save react-dendrimer
Why Do I Need This?
There's a good chance you don't! Composition in redux is intended to happen at the reducer level, however there are some cases where you may need to isolate "sub-apps" as individual components in a larger application (see https://redux.js.org/recipes/isolating-subapps).
A problem arises when you need to communicate between "sub-apps", as they are each their own source of truth! The best solution would be to join all "sub-apps" that need to communicate with eachother under a single store through reducer composition, however this isn't always a realistic possibility.
React dendrimer provides a simple solution for working with and communicating between redux "sub-apps" without sacrificing one-way data flow, by allowing you to wrap entire redux apps as controlled components -- just like you would a form input!
Example usage
Let's create a controlled redux app component (dendrimer) from a redux application with a simple state tree:
import { Component } from 'react';
import Dendrimer from 'react-dendrimer';
import { SubAppRootComponent, reducer, myCustomMiddleware } from './subApp';
export default class SubAppDendrimer extends Component {
constructor(props) {
super(props);
this.state = {
subAppState: {
foo: true,
bar: true
}
};
}
render() {
return (
<Dendrimer
onChange={this.handleSubAppChange}
reducer={reducer}
state={this.state.subAppState}
>
<SubAppRootComponent />
</Dendrimer>
);
}
handleSubAppChange(subAppAction, newSubAppState) {
this.setState({
subAppState: newSubAppState
});
}
}
Each time an action dispatched within the "sub-app" would cause its state to change, the action and new state is instead provided to our callback handleSubAppChange
. From here we can register the new state into our component state, and let it flow back into the "sub-app" through the state
prop on Dendrimer
.
Notably, the state tree of the "sub-app" store is not updated until the state flows back in through the state
prop on Dendrimer
, so the "sub-app" is in effect "controlled" by this outer component.
If our "sub-app" is dependent on some middleware (or store enhancer), we can add it to the Dendrimer
by modifying the above example:
render() {
return (
<Dendrimer
enhancer={applyMiddleware(myCustomMiddleware)}
onChange={this.handleSubAppChange}
reducer={reducer}
state={this.state.subAppState}
>
<SubAppRootComponent />
</Dendrimer>
);
}
This way we can preserve the full functionality of the "sub-app" while ensuring it's state is controlled by the main app.
Note: The "sub-app" is still responsible for its own side-effects! Logging, ajax requests, etc performed by the "sub-app" will not be prevented by the dendrimer.
Contributions
Anyone is welcome to contribute to this package. My only "rule" is that your contribution must either pass the existing unit tests, or include additional unit tests to cover new functionality.
Here are some commands that may be helpful for development:
npm test
: Runs the unit testsnpm run build
: Builds the library
License
MIT