@unitedstatespowersquadrons/components 1.2.9 → 1.2.10-pre.1

package/Reducer/Example/SubComponent.tsx

@@ -13,7 +13,7 @@ const SubComponent = () => {
   };
 
   const sendUpstreamMessage = () => {
-    channel.send({ message: "upstream" });
+    if (channel) channel.send({ message: "upstream" });
   };
 
   return(

package/Reducer/buildReducer.tsx

@@ -1,7 +1,7 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { Draft, produce } from "immer";
 import { useImmerReducer } from "use-immer";
-import { Cable, createConsumer } from "@rails/actioncable";
+import { Cable, Channel, createConsumer } from "@rails/actioncable";
 import { CableAction, DispatchFunc, ReducerHandler } from "./types";
 
 interface InitialAppProps<AppState> {
@@ -63,13 +63,16 @@ export default function buildReducer<AppState, AppAction>(
 
   function useAppCableSubscription(dispatch: DispatchFunc<CableAction>, channel: string) {
     const appCable = useAppCable();
+    const channelRef = useRef<Channel>(null);
 
-    return(
-      appCable.subscriptions.create(
+    useEffect(() => {
+      channelRef.current = appCable.subscriptions.create(
         { channel },
         { received: (data: object) => dispatch({ data, type: "receivedCable" } as CableAction) }
-      )
-    );
+      );
+    }, [appCable.subscriptions, channel, dispatch]);
+
+    return channelRef.current;
   }
 
   function useAppDispatch() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.9",
+  "version": "1.2.10-pre.1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {