Connect containers to components, without sacrificing performance.
This library basically combines together react-selectr, react-should-component-update and unstated-with-containers together.
npm install --save unstated-connect2
connect ({
container?: UnstatedContainer, // Single unstated container to connect
containers?: UnstatedContainer[], // Array of unstated containers to connect
shouldComponentUpdate?: rule | rule[], // Rule/rules to pass to `react-should-component-update`
selector?: Function, // Selector function to pass to `react-selectr`
pure?: false // Option to pass to `react-selectr`
})
import connect from 'unstated-connect2';
import MyContainer from './my_container';
import MyOtherContainer from './my_other_container';
import MyComponent from './my_component';
// The following code will:
// 1. Pass the value of `container` to `unstated-with-containers`, ensuring it gets connected
// 2. Pass the value of `shouldComponentUpdate` to `react-should-component-update`, ensuring unnecessary selections and re-renders are reduced
// 3. Pass the value of `selector` to `react-selectr`, ensuring MyComponent will only receive the selected props, minimizing unecessary re-renders
connect ({
container: MyContainer,
shouldComponentUpdate: 'path.to.relevant.prop',
selector: ({ container }) => {
foo: container.foo,
bar: container.getBar ()
}
})( MyComponent )
// If all you need is subscribing to one or multiple containers, you can simply write:
connect ( MyContainer )( MyComponent );
connect ( [MyContainer, MyOtherContainer] )( MyComponent );
- unstated-with-containers: Higher-Order Component for subscribing to containers.
- unstated-hmr: Preserve containers' states across Hot-Module-Replacements.
- unstated-compose: Compose multiple containers into one.
-
unstated-compose-suspense: Add suspend/unsuspend support to
unstated-compose
. -
unstated-compose-suspense-middleware: Add middlewares support to
unstated-compose-suspense
. - unstated-suspense: Suspend/unsuspend updates propagation from your containers.
-
unstated-suspense-middleware: Add middlewares support to
unstated-suspense
.
MIT © Fabio Spampinato