Merge pull request #2024 from reduxjs/v1.8.0-integration

Author: markerikson

.codesandbox/ci.json

@@ -12,13 +12,11 @@
   "packages": [
     "packages/toolkit",
     "packages/rtk-query-graphql-request-base-query",
-    "packages/action-listener-middleware",
     "packages/rtk-query-codegen-openapi"
   ],
   "publishDirectory": {
     "@reduxjs/toolkit": "packages/toolkit",
     "@rtk-query/graphql-request-base-query": "packages/rtk-query-graphql-request-base-query",
-    "@rtk-incubator/action-listener-middleware": "packages/action-listener-middleware",
     "@rtk-query/codegen-openapi": "packages/rtk-query-codegen-openapi"
   }
 }

.github/workflows/listenerTests.yml

@@ -96,7 +96,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['14.x']
-        ts: ['3.9', '4.0', '4.1', '4.2', '4.3', '4.4', '4.5', 'next']
+        ts: ['4.1', '4.2', '4.3', '4.4', '4.5', '4.6.1-rc', 'next']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2

.github/workflows/tests.yml

@@ -3,8 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^1.6.0-rc.1",
-    "@rtk-incubator/action-listener-middleware": "^0.6.0",
+    "@reduxjs/toolkit": "^1.8.0-rc.0",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",

docs/api/createListenerMiddleware.mdx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react'
+import { Provider } from 'react-redux'
+import type { Unsubscribe } from '@reduxjs/toolkit'
+import { setupThemeListeners } from '../../services/theme/listeners'
+import { setupCounterListeners } from '../../services/counter/listeners'
+import { ChangeThemeForm } from '../ChangeThemeForm/ChangeThemeForm'
+import { CounterList } from '../CounterList/CounterList'
+import { CreateCounterForm } from '../CreateCounterForm/CreateCounterForm'
+import { store, startAppListening } from '../../store'
+
+export function App() {
+  useEffect(() => {
+    const subscriptions: Unsubscribe[] = [
+      setupCounterListeners(startAppListening),
+      setupThemeListeners(startAppListening),
+    ]
+
+    return () => subscriptions.forEach((unsubscribe) => unsubscribe())
+  }, [])
+
+  return (
+    <React.StrictMode>
+      <Provider store={store}>
+        <main className={'main'}>
+          <header className="App-header">
+            <h1>Counter example</h1>
+          </header>
+          <ChangeThemeForm />
+          <CreateCounterForm />
+          <CounterList />
+        </main>
+      </Provider>
+    </React.StrictMode>
+  )
+}

examples/action-listener/counter/package.json

@@ -1,29 +1,11 @@
-import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
-import { Provider } from 'react-redux'
 import { store } from './store'
 import { themeActions } from './services/theme/slice'
-import { ChangeThemeForm } from './components/ChangeThemeForm/ChangeThemeForm'
-import { CounterList } from './components/CounterList/CounterList'
-import { CreateCounterForm } from './components/CreateCounterForm/CreateCounterForm'
+import { App } from './components/App/App'
 
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
   store.dispatch(themeActions.changeColorScheme('dark'))
 }
 
-ReactDOM.render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <main className={'main'}>
-        <header className="App-header">
-          <h1>Counter example</h1>
-        </header>
-        <ChangeThemeForm />
-        <CreateCounterForm />
-        <CounterList />
-      </main>
-    </Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+ReactDOM.render(<App />, document.getElementById('root'))

examples/action-listener/counter/src/components/App/App.tsx

@@ -1,6 +1,12 @@
 import { counterActions, counterSelectors } from './slice'
-import { AnyAction, isAllOf, isAnyOf, PayloadAction } from '@reduxjs/toolkit'
-import type { AppListenerApi, AppActionListenerMiddleware } from '../../store'
+import {
+  AnyAction,
+  isAllOf,
+  isAnyOf,
+  PayloadAction,
+  Unsubscribe,
+} from '@reduxjs/toolkit'
+import type { AppListenerEffectAPI, AppStartListening } from '../../store'
 
 function shouldStopAsyncTasksOf(id: string) {
   return isAllOf(
@@ -14,7 +20,7 @@ async function onUpdateByPeriodically(
   {
     payload: { id, delta },
   }: ReturnType<typeof counterActions.updateByPeriodically>,
-  { dispatch, getState, getOriginalState, condition }: AppListenerApi
+  { dispatch, getState, getOriginalState, condition }: AppListenerEffectAPI
 ) {
   const counter = counterSelectors.selectById(getState(), id)
 
@@ -44,7 +50,7 @@ async function onUpdateAsync(
   {
     payload: { id, delta, delayMs },
   }: ReturnType<typeof counterActions.updateByAsync>,
-  { condition, dispatch, getState }: AppListenerApi
+  { condition, dispatch, getState }: AppListenerEffectAPI
 ) {
   const counter = counterSelectors.selectById(getState(), id)
 
@@ -71,16 +77,16 @@ async function onUpdateAsync(
  * ```
  */
 export function setupCounterListeners(
-  actionListener: AppActionListenerMiddleware
-) {
+  startListening: AppStartListening
+): Unsubscribe {
   const subscriptions = [
-    actionListener.addListener({
+    startListening({
       actionCreator: counterActions.updateByPeriodically,
-      listener: onUpdateByPeriodically,
+      effect: onUpdateByPeriodically,
     }),
-    actionListener.addListener({
+    startListening({
       actionCreator: counterActions.updateByAsync,
-      listener: onUpdateAsync,
+      effect: onUpdateAsync,
     }),
   ]
 

examples/action-listener/counter/src/index.tsx

@@ -1,21 +1,22 @@
 import { themeActions } from './slice'
-import type { AppActionListenerMiddleware } from '../../store'
+import type { AppStartListening } from '../../store'
+import { Unsubscribe } from '@reduxjs/toolkit'
 
 function onChangeColorScheme(
   action: ReturnType<typeof themeActions.changeColorScheme>
 ) {
-  if (action.payload === 'light') {
-    document.documentElement.classList.remove('dark')
-  } else {
-    document.documentElement.classList.add('dark')
-  }
+  document.documentElement.classList.toggle('dark', action.payload !== 'light')
 }
 
 export function setupThemeListeners(
-  actionListener: AppActionListenerMiddleware
-) {
-  return actionListener.addListener({
-    actionCreator: themeActions.changeColorScheme,
-    listener: onChangeColorScheme,
-  })
+  startListening: AppStartListening
+): Unsubscribe {
+  const listeners = [
+    startListening({
+      actionCreator: themeActions.changeColorScheme,
+      effect: onChangeColorScheme,
+    }),
+  ]
+
+  return () => listeners.forEach((unsubscribe) => unsubscribe())
 }

examples/action-listener/counter/src/services/counter/listeners.ts

@@ -1,16 +1,16 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { configureStore } from '@reduxjs/toolkit'
-import { counterSlice } from './services/counter/slice'
 import {
-  createActionListenerMiddleware,
-  ActionListenerMiddlewareAPI,
-  ActionListenerMiddleware,
-} from '@rtk-incubator/action-listener-middleware'
+  configureStore,
+  createListenerMiddleware,
+  TypedStartListening,
+  TypedAddListener,
+  ListenerEffectAPI,
+  addListener,
+} from '@reduxjs/toolkit'
+import { counterSlice } from './services/counter/slice'
 import { themeSlice } from './services/theme/slice'
-import { setupCounterListeners } from './services/counter/listeners'
-import { setupThemeListeners } from './services/theme/listeners'
 
-const actionListenerMiddleware = createActionListenerMiddleware({
+const listenerMiddlewareInstance = createListenerMiddleware({
   onError: () => console.error,
 })
 
@@ -19,7 +19,7 @@ const store = configureStore({
     [counterSlice.name]: counterSlice.reducer,
     [themeSlice.name]: themeSlice.reducer,
   },
-  middleware: (gDM) => gDM().prepend(actionListenerMiddleware),
+  middleware: (gDM) => gDM().prepend(listenerMiddlewareInstance.middleware),
 })
 
 export { store }
@@ -29,19 +29,15 @@ export type RootState = ReturnType<typeof store.getState>
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
 export type AppDispatch = typeof store.dispatch
 
-export type AppListenerApi = ActionListenerMiddlewareAPI<RootState, AppDispatch>
-export type AppActionListenerMiddleware = ActionListenerMiddleware<
-  RootState,
-  AppDispatch
->
+export type AppListenerEffectAPI = ListenerEffectAPI<RootState, AppDispatch>
 
-// Typed version of `actionListenerMiddleware`
-export const appActionListener =
-  actionListenerMiddleware as AppActionListenerMiddleware
+export type AppStartListening = TypedStartListening<RootState>
+export type AppAddListener = TypedAddListener<RootState>
+
+export const startAppListening =
+  listenerMiddlewareInstance.startListening as AppStartListening
+export const addAppListener = addListener as AppAddListener
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>()
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
-
-setupCounterListeners(appActionListener)
-setupThemeListeners(appActionListener)