# liveramp-react-manager

> A utility for managing multiple React apps in a single project, and adding React to existing non-React projects.

Latest version **1.0.21** (published 2018-08-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install liveramp-react-manager
pnpm add liveramp-react-manager
yarn add liveramp-react-manager
bun add liveramp-react-manager
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.21 |
| Published | 2018-08-23 |
| First published | 2018-08-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 535.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eric Summins |
| Maintainers | esummins |
| Keywords | React, ReactManager, mini, manager, get, store, getstore, app, shim, backbone |

## Links

- npm: https://www.npmjs.com/package/liveramp-react-manager
- Repository: https://git.liveramp.net/RailsRepos/ReactManager
- npm.io page: https://npm.io/package/liveramp-react-manager

## Recent versions

- 1.0.21 (latest) — 2018-08-23
- 1.0.20 — 2018-08-23

## README

# ReactManager

Some tools and helper methods for managing multiple React applications in the same project.

## Usage

Include `ReactManager` in your `package.json` dependencies:

```bash
npm install --save react-manager
```

Import tools you plan on using where necessary:

```jsx
import { ReactManager } from "ReactManager";
```

## Package Goal

This goal of this project is to house tools that are used by Liveramp engineers to manage the tech stack for apps with multiple React sections. This includes handling boilerplate specific to Liveramp design decisions, instantiating commonly used tools or files, and anything else that reduces the cognitive overhead of implementing multiple React apps simultaneously or in an existing project which didn't previously use React.

If you see another opportunity to make it easy for other engineers to use new tools, feel free to add another file to this package.

## Contributing

Open a PR, assign Eric Summins.

## Included Tools

### ReactManager

This is a tool to help manage small chunks of React inside of larger apps, or apps built on older frameworks (e.g. Backbone). This handles the majority of work around monitoring DOM changes, rendering the React root, cleaning it up when its node is deleted, and creating and maintaining the store(s).

To use this tool, find the top level IIFE for your React App, and call
`ReactManager.default()`
passing in an arbitrary number of React App option hashes as separate arguments.

These option hashes are POJOs with the following keys:

- RootId: the id of the root node of the new React section.
- ReactMainComponent: the root component of the new React section.
- ReducerFunction: the root reducer of the new React section.
- StoreId: all React sections with the same storeId will share a common persisted store.
  - The store will have a top level consisting of the names of the reducers being used.
- ReducerNamespace: The state of a combined reducer will be namespaced under the specified name if given
  - otherwise it will be namespaced under the reducer name without the word 'Reducer'
    - E.G. FilesReducer will be stored under the 'Files' key.
  - If the reducer name doesn't end with 'Reducer', the whole name will be used.
    - E.G. FileManager (a reducer) will store things under the 'FileManager' key.
- ReactRouter: Whether or not this app is going to need React Router integration.
- RootSaga: The root saga that is going to be tied to the store. Note that only one RootSaga can be applied to a given store.

```jsx
ReactManager([
  {
    RootId: "integration-groups-container",
    ReactMainComponent: IntegrationGroupsIndex.default,
    ReducerFunction: IntegrationGroupsReducer.default,
    StoreId: "flex_ints",
    ReducerNamespace: "integrationGroups",
  },
]);
```

React Manager supports React Router integration (version 2 or 3, v4 is not currently supported). You can find a store connected history as a `syncedHistory` prop on your top level component. Remember to set the ReactRouter flag on your rootOpt.

```jsx
<MainComponent>
  <Router history={this.props.syncedHistory}>
    <Route path="/somePath" component={someComponent} />
    <Route path="/someOtherPath" component={someOtherComponent} />
  </Router>
</MainComponent>
```

In the event that you are integrating ReactManager into a pre-existing application, you may need to correct the references to top level state in connected components. If you are using a shared store, or integrating with a pre-supported package that contains a reducer (e.g. React Router), then your application state will now be namespaced under the reducer namespace.

If this is the case, you will need to go through all of your connected components (those where you call ReactRedux.connect), and update your references to state to include the namespace.

E.G.

```
function mapStateToProps(state) {
  return {
    columns: state.claAppReducer.columns,
    clAccount: state.claAppReducer.clAccount,
    queries: state.claAppReducer.queries,
  };
}
```

with a reducer namespace of 'claAppState' would become

```
function mapStateToProps(state) {
  return {
    columns: state.claAppState.claAppReducer.columns,
    clAccount: state.claAppState.claAppReducer.clAccount,
    queries: state.claAppState.claAppReducer.queries,
  };
}
```

### getStore

getStore is a method that's used to generate a Redux store that includes thunk and router middlewares. You can pass in a function (`getMiddleware`) that returns an array of middlewares to be injected into getStore. The getMiddleware function will be invoked with the default middlewares as an argument. Note that getMiddleware may optionally be provided as an array instead of a function, in which case that array will be used in place of the default middlewares.

**NB:** getStore is used by ReactManager to initialize stores, and doesn't need to be explicitly called if you're using the manager interface. It's exposed here for cases where the manager can not be used, and a developer needs to build their own application implementation.

In order for dev tools to function correctly, the gon must include the rails environment on the 'env' key.

The function has one required argument: the reducer function.

It can also receive a number of optional arguments in an argument hash passed as the second argument.

#### Options

```
reducerPath // The relative path to the reducer function, to support reducer hotloading.

hydrate // An initial state for the store. This will override the default state for the reducer.

sagaCallback // should be of the form: (sagaMiddleware) => sagaMiddleware.run(myRootSaga)

storeName // The name that the store will use in the debugging tools
```

---
_Source: https://npm.io/package/liveramp-react-manager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._