ReactManager

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

Usage

Include ReactManager in your package.json dependencies:

npm install --save react-manager

Import tools you plan on using where necessary:

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.

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.

<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