Merge pull request reduxjs#1876 from FaberVitale/refactor/listener-mi…

…ddleware-polish-counter-template
qiyx2019 · Dec 31, 2021 · a7f1dfc · a7f1dfc
2 parents fdb8b67 + 838af71
commit a7f1dfc
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/examples/action-listener/counter/src/services/counter/listeners.ts b/examples/action-listener/counter/src/services/counter/listeners.ts
@@ -60,16 +60,31 @@ async function onUpdateAsync(
   }
 }
 
+/**
+ * Subscribes counter listeners and returns a `teardown` function.
+ * @example
+ * ```ts
+ * useEffect(() => {
+ *   const unsubscribe = setupCounterListeners();
+ *   return unsubscribe;
+ * }, []);
+ * ```
+ */
 export function setupCounterListeners(
   actionListener: AppActionListenerMiddleware
 ) {
-  actionListener.addListener({
-    actionCreator: counterActions.updateByPeriodically,
-    listener: onUpdateByPeriodically,
-  })
+  const subscriptions = [
+    actionListener.addListener({
+      actionCreator: counterActions.updateByPeriodically,
+      listener: onUpdateByPeriodically,
+    }),
+    actionListener.addListener({
+      actionCreator: counterActions.updateByAsync,
+      listener: onUpdateAsync,
+    }),
+  ]
 
-  actionListener.addListener({
-    actionCreator: counterActions.updateByAsync,
-    listener: onUpdateAsync,
-  })
+  return () => {
+    subscriptions.forEach((unsubscribe) => unsubscribe())
+  }
 }
diff --git a/examples/action-listener/counter/src/services/theme/listeners.ts b/examples/action-listener/counter/src/services/theme/listeners.ts
@@ -14,7 +14,7 @@ function onChangeColorScheme(
 export function setupThemeListeners(
   actionListener: AppActionListenerMiddleware
 ) {
-  actionListener.addListener({
+  return actionListener.addListener({
     actionCreator: themeActions.changeColorScheme,
     listener: onChangeColorScheme,
   })

diff --git a/examples/action-listener/counter/src/store.ts b/examples/action-listener/counter/src/store.ts
@@ -10,7 +10,7 @@ import { themeSlice } from './services/theme/slice'
 import { setupCounterListeners } from './services/counter/listeners'
 import { setupThemeListeners } from './services/theme/listeners'
 
-export const actionListener = createActionListenerMiddleware({
+const actionListenerMiddleware = createActionListenerMiddleware({
   onError: () => console.error,
 })
 
@@ -19,7 +19,7 @@ const store = configureStore({
     [counterSlice.name]: counterSlice.reducer,
     [themeSlice.name]: themeSlice.reducer,
   },
-  middleware: (gDM) => gDM().prepend(actionListener),
+  middleware: (gDM) => gDM().prepend(actionListenerMiddleware),
 })
 
 export { store }
@@ -35,11 +35,13 @@ export type AppActionListenerMiddleware = ActionListenerMiddleware<
   AppDispatch
 >
 
-actionListener as AppActionListenerMiddleware
+// Typed version of `actionListenerMiddleware`
+export const appActionListener =
+  actionListenerMiddleware as AppActionListenerMiddleware
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>()
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
 
-setupCounterListeners(actionListener as AppActionListenerMiddleware)
-setupThemeListeners(actionListener as AppActionListenerMiddleware)
+setupCounterListeners(appActionListener)
+setupThemeListeners(appActionListener)