[breaking] CacheProvider takes array of managers

src/index.ts

@@ -38,6 +38,8 @@ import {
   State,
   FetchAction,
   ReceiveAction,
+  Middleware,
+  Manager,
 } from './types';
 import { StateContext, DispatchContext } from './react-integration/context';
 
@@ -81,6 +83,9 @@ export type Request = RequestType;
 export type FetchAction = FetchAction;
 export type ReceiveAction = ReceiveAction;
 
+export type Middleware = Middleware;
+export type Manager = Manager;
+
 export {
   Resource,
   CacheProvider,

src/react-integration/provider/CacheProvider.tsx

@@ -7,39 +7,37 @@ import NetworkManager from '../../state/NetworkManager';
 import SubscriptionManager from '../../state/SubscriptionManager';
 import PollingSubscription from '../../state/PollingSubscription';
 import createEnhancedReducerHook from './middleware';
-import { State } from '../../types';
+import { State, Manager } from '../../types';
 
 interface ProviderProps {
   children: ReactNode;
-  manager?: NetworkManager;
-  subscriptionManager?: SubscriptionManager<any>;
+  managers?: Manager[];
   initialState?: State<unknown>;
 }
+
 /** Controller managing state of the REST cache and coordinating network requests. */
 export default function CacheProvider({
   children,
-  manager = new NetworkManager(),
-  subscriptionManager = new SubscriptionManager(PollingSubscription),
+  managers = [
+    new NetworkManager(),
+    new SubscriptionManager(PollingSubscription),
+  ],
   initialState = defaultState,
 }: ProviderProps) {
   // TODO: option to use redux
   const useEnhancedReducer = createEnhancedReducerHook(
-    manager.getMiddleware(),
-    subscriptionManager.getMiddleware(),
+    ...managers.map(manager => manager.getMiddleware()),
   );
   const [state, dispatch] = useEnhancedReducer(masterReducer, initialState);
 
   // if we change out the manager we need to make sure it has no hanging async
   useEffect(() => {
     return () => {
-      manager.cleanup();
-    };
-  }, [manager]);
-  useEffect(() => {
-    return () => {
-      subscriptionManager.cleanup();
+      for (let i = 0; i < managers.length; ++i) {
+        managers[i].cleanup();
+      }
     };
-  }, [subscriptionManager]);
+  }, managers);
 
   return (
     <DispatchContext.Provider value={dispatch}>

src/react-integration/provider/__tests__/provider.tsx

@@ -29,7 +29,7 @@ describe('<CacheProvider />', () => {
     expect(curDisp).toBe(dispatch);
     expect(count).toBe(1);
     const manager = new NetworkManager();
-    rerender(<CacheProvider manager={manager}>{chil}</CacheProvider>);
+    rerender(<CacheProvider managers={[manager]}>{chil}</CacheProvider>);
     expect(curDisp).toBe(dispatch);
     expect(count).toBe(1);
     rerender(

src/state/NetworkManager.ts

@@ -1,5 +1,5 @@
 import { memoize } from 'lodash';
-import { FetchAction, ReceiveAction, MiddlewareAPI } from '../types';
+import { FetchAction, ReceiveAction, MiddlewareAPI, Manager } from '../types';
 
 export const RIC: (cb: (...args: any[]) => void, options: any) => void =
   typeof (global as any).requestIdleCallback === 'function'
@@ -13,7 +13,7 @@ export const RIC: (cb: (...args: any[]) => void, options: any) => void =
  *
  * Interfaces with store via a redux-compatible middleware.
  */
-export default class NetworkManager {
+export default class NetworkManager implements Manager {
   protected fetched: { [k: string]: Promise<any> } = {};
   protected resolvers: { [k: string]: (value?: any) => void } = {};
   protected rejectors: { [k: string]: (value?: any) => void } = {};

src/state/SubscriptionManager.ts

@@ -1,5 +1,10 @@
 import { memoize } from 'lodash';
-import { MiddlewareAPI, SubscribeAction, UnsubscribeAction } from '../types';
+import {
+  MiddlewareAPI,
+  SubscribeAction,
+  UnsubscribeAction,
+  Manager,
+} from '../types';
 import { Schema } from '../resource';
 
 type Actions = UnsubscribeAction | SubscribeAction;
@@ -29,7 +34,8 @@ export interface SubscriptionConstructable {
  * Constructor takes a SubscriptionConstructable class to control how
  * subscriptions are handled. (e.g., polling, websockets)
  */
-export default class SubscriptionManager<S extends SubscriptionConstructable> {
+export default class SubscriptionManager<S extends SubscriptionConstructable>
+implements Manager {
   protected subscriptions: {
     [url: string]: InstanceType<S>;
   } = {};

src/test/makeRenderRestHook.tsx

@@ -6,15 +6,14 @@ import { MockNetworkManager } from './managers';
 import mockInitialState, { Fixture } from './mockState';
 import {
   State,
-  NetworkManager,
   SubscriptionManager,
   PollingSubscription,
+  Manager,
 } from '../index';
 
 export default function makeRenderRestHook(
   makeProvider: (
-    manager: NetworkManager,
-    subManager: SubscriptionManager<any>,
+    managers: Manager[],
     initialState?: State<unknown>,
   ) => React.ComponentType<{ children: React.ReactChild }>,
 ) {
@@ -30,8 +29,7 @@ export default function makeRenderRestHook(
     const initialState =
       options && options.results && mockInitialState(options.results);
     const Provider: React.ComponentType<any> = makeProvider(
-      manager,
-      subManager,
+      [manager, subManager],
       initialState,
     );
     const Wrapper = options && options.wrapper;

src/test/providers.tsx

@@ -4,10 +4,9 @@ import { ReactNode } from 'react';
 import {
   State,
   reducer,
-  NetworkManager,
-  SubscriptionManager,
   ExternalCacheProvider,
   CacheProvider,
+  Manager,
 } from '../index';
 
 // Extension of the DeepPartial type defined by Redux which handles unknown
@@ -18,17 +17,13 @@ type DeepPartialWithUnknown<T> = {
 };
 
 const makeExternalCacheProvider = (
-  manager: NetworkManager,
-  subscriptionManager: SubscriptionManager<any>,
+  managers: Manager[],
   initialState?: DeepPartialWithUnknown<State<any>>,
 ) => {
   const store = createStore(
     reducer,
     initialState,
-    applyMiddleware(
-      manager.getMiddleware(),
-      subscriptionManager.getMiddleware(),
-    ),
+    applyMiddleware(...managers.map(manager => manager.getMiddleware())),
   );
 
   return ({ children }: { children: ReactNode }) => (
@@ -39,16 +34,11 @@ const makeExternalCacheProvider = (
 };
 
 const makeCacheProvider = (
-  manager: NetworkManager,
-  subscriptionManager: SubscriptionManager<any>,
+  managers: Manager[],
   initialState?: State<unknown>,
 ) => {
   return ({ children }: { children: ReactNode }) => (
-    <CacheProvider
-      manager={manager}
-      subscriptionManager={subscriptionManager}
-      initialState={initialState}
-    >
+    <CacheProvider managers={managers} initialState={initialState}>
       {children}
     </CacheProvider>
   );

src/types.ts

@@ -113,3 +113,8 @@ export interface MiddlewareAPI<
   getState: () => React.ReducerState<R>;
   dispatch: React.Dispatch<React.ReducerAction<R>>;
 }
+
+export interface Manager {
+  getMiddleware(): Middleware;
+  cleanup(): void;
+}