# @redux-dynostore/react-redux > Call dynostore enhancers when a React component is mounted Latest version **3.2.1** (published 2021-01-27) · BSD-3-Clause license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @redux-dynostore/react-redux pnpm add @redux-dynostore/react-redux yarn add @redux-dynostore/react-redux bun add @redux-dynostore/react-redux ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 3.2.1 | | Published | 2021-01-27 | | First published | 2018-04-17 | | Weekly downloads | 0 | | License | BSD-3-Clause | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 21.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 119 | | Author | Michael Peyper | | Maintainers | ozwolf, mpeyper, jpeyper | ## Links - npm: https://www.npmjs.com/package/@redux-dynostore/react-redux - Repository: https://github.com/ioof-holdings/redux-dynostore - Homepage: https://github.com/ioof-holdings/redux-dynostore#readme - Issues: https://github.com/ioof-holdings/redux-dynostore/issues - npm.io page: https://npm.io/package/@redux-dynostore/react-redux ## Dependencies (3) - [recompose](https://npm.io/package/recompose.md) ^0.30.0 - [@redux-dynostore/core](https://npm.io/package/@redux-dynostore/core.md) ^3.2.1 - [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.0 ## Recent versions - 3.2.1 (latest) — 2021-01-27 - 3.2.0-alpha.1 (alpha) — 2021-01-14 - 3.2.0 — 2021-01-14 - 3.2.0-alpha.0 — 2021-01-13 - 3.1.1 — 2020-12-03 - 3.1.1-alpha.0 — 2020-08-15 - 3.1.0 — 2020-05-02 - 3.0.1 — 2019-09-28 - 3.0.0 — 2019-09-28 - 2.0.0 — 2019-01-16 - 1.1.0 — 2018-10-30 - 1.0.0 — 2018-04-17 ## README # @redux-dynostore/react-redux ## 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: * [`redux-dynamic-modules`](https://www.npmjs.com/package/redux-dynamic-modules) * [`redux-injectors`](https://www.npmjs.com/package/redux-injectors) * [`redux-injector`](https://www.npmjs.com/package/redux-injector) * [`redux-reducers-injector`](https://www.npmjs.com/package/redux-reducers-injector) * [`paradux`](https://www.npmjs.com/package/paradux) If you want to continue using this library, we encourage you to fork this repo and take over maintenance yourself. --- [![build status](https://img.shields.io/travis/ioof-holdings/redux-dynostore/master.svg?style=flat-square)](https://travis-ci.org/ioof-holdings/redux-dynostore) [![npm version](https://img.shields.io/npm/v/@redux-dynostore/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/@redux-dynostore/react-redux) [![npm downloads](https://img.shields.io/npm/dm/@redux-dynostore/react-redux.svg?style=flat-square)](https://www.npmjs.com/package/@redux-dynostore/react-redux) [![License: BSD](https://img.shields.io/npm/l/@redux-dynostore/react-redux.svg?style=flat-square)](/LICENSE.md) React bindings for redux-dynostore to provide dynamic redux features when a component is mounted. ## Usage ```javascript import dynamic from '@redux-dynostore/react-redux' export default dynamic('identifier', somethingDynamic(), somethingElseDynamic('with parameters'))(MyComponent) ``` ### Multiple Instances The `'identifier'` shown above is the key that will be used for all instances of the component. If multiple instances are required to not share dynamic features (i.e. redux reducers), the the `createInstance` function can be used: ```javascript import MyComponent from './MyComponent' const MyComponent1 = MyComponent.createInstance('instance1') const MyComponent2 = MyComponent.createInstance('instance2') ``` ### Options An optional options object can be passed as the final parameter to the `dynamic` function: ```javascript export default dynamic('identifier', somethingDynamic(), { /* options */ })(MyComponent) ``` #### context ```javascript import CustomReactReduxContext from './CustomReactReduxContext' export default dynamic('identifier', somethingDynamic(), { context: CustomReactReduxContext })(MyComponent) ``` This option overrides the `context` used for accessing the store in the React context. If you are overriding this value, you should also be overriding the context passed to any `Provider` and/or `connect` components as well. Please refer to the [Redux documentation](https://react-redux.js.org/using-react-redux/accessing-store#providing-custom-context) for more details on this use case. ### `DynamicProvider` `dynamic` components will not render when server-side rendering (SSR) your app unless you add a `DynamicProvider` somewhere near the root of of your component tree (anywhere above the the first `dynamic` component). This will allow the component to call their enhancers synchronously in the first render pass. You must also ensure that the `DynamicProvider` is also rendered when hydrating that app on the client. ```js import ReactDom from 'react' import { Provider } from 'react-redux' import dynamic, { DynamicProvider } from '@redux-dynostore/react-redux' import store from './store' import MyDynamicComponent from './MyDynamicComponent ReactDom.render(( ), document.getElementById('root')) ``` You can also nest multiple `DynamicProvider` components within each other. ```js ReactDom.render(( ), document.getElementById('root')) ``` One example of when you might do this is when composing multiple sub-apps together into a parent-app and each app could have their own `DynamicProvider` instance. However, it is important to that the root `DynamicProvider` does not get unmounted and remounted as this will another synchronous render pass to occur after the first render, which will produce warnings from React about cross component updates. While not required for client-side rendering (CSR), `DynamicProvider`, it can also slightly improve performance of the first render pass, however, due to limited testing, there might be unforeseen impacts of using this in an a CSR context, so use it at your own risk. ## Enhancers Enhancers are used to provide additional wrappers around the passed component when it is mounted. The following enhancers are provided: 1. [Reducers](/packages/redux-dynostore-core) - dynamically attach reducers 2. [Sagas](/packages/redux-dynostore-redux-saga) - dynamically run sagas 3. [Dispatch Action](/packages/redux-dynostore-core) - dispatch actions when the component is mounted 4. [Subspaced](/packages/redux-dynostore-react-redux-subspace) - mounts the component is in a subspace for the components identifier 1. [Namespaced Reducers](/packages/redux-dynostore-redux-subspace) - dynamically attach reducers that are namespaced with the component's identifier 2. [Subspaced Sagas](/packages/redux-dynostore-redux-subspace-saga) - dynamically run sagas that are subspaced for the component's identifier 3. [Dispatch Namespaced Action](/packages/redux-dynostore-redux-subspace) - dispatch actions when the component is mounted that are namespaced with the component's identifier ### Custom Enhancers Enhancers can be created for many use cases by implementing the following interface: ```javascript const enhancer = identifier => store => Component => EnhancedComponent ``` ### Instance Enhancers Additional enhancers can be injected on a specific instance of a dynamic component ```javascript const MyComponent1 = MyComponent.createInstance('instance1', subspaced()) ``` --- _Source: https://npm.io/package/@redux-dynostore/react-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._