Use Redux 5 action types

Author: markerikson

src/components/Context.ts

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import type { Context } from 'react'
-import type { Action, AnyAction, Store } from 'redux'
+import type { Action, Store, UnknownAction } from 'redux'
 import type { Subscription } from '../utils/Subscription'
 import type { CheckFrequency } from '../hooks/useSelector'
 
 export interface ReactReduxContextValue<
   SS = any,
-  A extends Action = AnyAction
+  A extends Action<string> = UnknownAction
 > {
   store: Store<SS, A>
   subscription: Subscription

src/components/Provider.tsx

@@ -4,10 +4,13 @@ import type { ReactReduxContextValue } from './Context'
 import { ReactReduxContext } from './Context'
 import { createSubscription } from '../utils/Subscription'
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
-import type { Action, AnyAction, Store } from 'redux'
+import type { Action, Store, UnknownAction } from 'redux'
 import type { CheckFrequency } from '../hooks/useSelector'
 
-export interface ProviderProps<A extends Action = AnyAction, S = unknown> {
+export interface ProviderProps<
+  A extends Action<string> = UnknownAction,
+  S = unknown
+> {
   /**
    * The single Redux store in your application.
    */
@@ -34,7 +37,7 @@ export interface ProviderProps<A extends Action = AnyAction, S = unknown> {
   children: ReactNode
 }
 
-function Provider<A extends Action = AnyAction, S = unknown>({
+function Provider<A extends Action<string> = UnknownAction, S = unknown>({
   store,
   context,
   children,

src/connect/invalidArgFactory.ts

@@ -2,7 +2,7 @@ import type { Action, Dispatch } from 'redux'
 
 export function createInvalidArgFactory(arg: unknown, name: string) {
   return (
-    dispatch: Dispatch<Action<unknown>>,
+    dispatch: Dispatch<Action<string>>,
     options: { readonly wrappedComponentName: string }
   ) => {
     throw new Error(

src/connect/mapDispatchToProps.ts

@@ -10,12 +10,12 @@ export function mapDispatchToPropsFactory<TDispatchProps, TOwnProps>(
     | undefined
 ) {
   return mapDispatchToProps && typeof mapDispatchToProps === 'object'
-    ? wrapMapToPropsConstant((dispatch: Dispatch<Action<unknown>>) =>
+    ? wrapMapToPropsConstant((dispatch: Dispatch<Action<string>>) =>
         // @ts-ignore
         bindActionCreators(mapDispatchToProps, dispatch)
       )
     : !mapDispatchToProps
-    ? wrapMapToPropsConstant((dispatch: Dispatch<Action<unknown>>) => ({
+    ? wrapMapToPropsConstant((dispatch: Dispatch<Action<string>>) => ({
         dispatch,
       }))
     : typeof mapDispatchToProps === 'function'

src/connect/mergeProps.ts

@@ -26,7 +26,7 @@ export function wrapMergePropsFunc<
 >(
   mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>
 ): (
-  dispatch: Dispatch<Action<unknown>>,
+  dispatch: Dispatch<Action<string>>,
   options: {
     readonly displayName: string
     readonly areMergedPropsEqual: EqualityFn<TMergedProps>

src/connect/selectorFactory.ts

@@ -4,7 +4,7 @@ import verifySubselectors from './verifySubselectors'
 import type { EqualityFn, ExtendedEqualityFn } from '../types'
 
 export type SelectorFactory<S, TProps, TOwnProps, TFactoryOptions> = (
-  dispatch: Dispatch<Action<unknown>>,
+  dispatch: Dispatch<Action<string>>,
   factoryOptions: TFactoryOptions
 ) => Selector<S, TProps, TOwnProps>
 
@@ -31,7 +31,7 @@ export type MapStateToPropsParam<TStateProps, TOwnProps, State> =
   | undefined
 
 export type MapDispatchToPropsFunction<TDispatchProps, TOwnProps> = (
-  dispatch: Dispatch<Action<unknown>>,
+  dispatch: Dispatch<Action<string>>,
   ownProps: TOwnProps
 ) => TDispatchProps
 
@@ -40,7 +40,7 @@ export type MapDispatchToProps<TDispatchProps, TOwnProps> =
   | TDispatchProps
 
 export type MapDispatchToPropsFactory<TDispatchProps, TOwnProps> = (
-  dispatch: Dispatch<Action<unknown>>,
+  dispatch: Dispatch<Action<string>>,
   ownProps: TOwnProps
 ) => MapDispatchToPropsFunction<TDispatchProps, TOwnProps>
 
@@ -74,7 +74,7 @@ export function pureFinalPropsSelectorFactory<
   mapStateToProps: WrappedMapStateToProps<TStateProps, TOwnProps, State>,
   mapDispatchToProps: WrappedMapDispatchToProps<TDispatchProps, TOwnProps>,
   mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
-  dispatch: Dispatch<Action<unknown>>,
+  dispatch: Dispatch<Action<string>>,
   {
     areStatesEqual,
     areOwnPropsEqual,
@@ -163,7 +163,7 @@ interface WrappedMapStateToProps<TStateProps, TOwnProps, State> {
 }
 
 interface WrappedMapDispatchToProps<TDispatchProps, TOwnProps> {
-  (dispatch: Dispatch<Action<unknown>>, ownProps: TOwnProps): TDispatchProps
+  (dispatch: Dispatch<Action<string>>, ownProps: TOwnProps): TDispatchProps
   readonly dependsOnOwnProps: boolean
 }
 
@@ -184,15 +184,15 @@ export interface SelectorFactoryOptions<
   State
 > extends InitOptions<TStateProps, TOwnProps, TMergedProps, State> {
   readonly initMapStateToProps: (
-    dispatch: Dispatch<Action<unknown>>,
+    dispatch: Dispatch<Action<string>>,
     options: InitOptions<TStateProps, TOwnProps, TMergedProps, State>
   ) => WrappedMapStateToProps<TStateProps, TOwnProps, State>
   readonly initMapDispatchToProps: (
-    dispatch: Dispatch<Action<unknown>>,
+    dispatch: Dispatch<Action<string>>,
     options: InitOptions<TStateProps, TOwnProps, TMergedProps, State>
   ) => WrappedMapDispatchToProps<TDispatchProps, TOwnProps>
   readonly initMergeProps: (
-    dispatch: Dispatch<Action<unknown>>,
+    dispatch: Dispatch<Action<string>>,
     options: InitOptions<TStateProps, TOwnProps, TMergedProps, State>
   ) => MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>
 }
@@ -210,7 +210,7 @@ export default function finalPropsSelectorFactory<
   TMergedProps,
   State
 >(
-  dispatch: Dispatch<Action<unknown>>,
+  dispatch: Dispatch<Action<string>>,
   {
     initMapStateToProps,
     initMapDispatchToProps,

src/hooks/useDispatch.ts

@@ -1,4 +1,4 @@
-import type { Action, AnyAction, Dispatch } from 'redux'
+import type { Action, Dispatch, UnknownAction } from 'redux'
 import type { Context } from 'react'
 
 import type { ReactReduxContextValue } from '../components/Context'
@@ -13,7 +13,7 @@ import { useStore as useDefaultStore, createStoreHook } from './useStore'
  */
 export function createDispatchHook<
   S = unknown,
-  A extends Action = AnyAction
+  A extends Action<string> = UnknownAction
   // @ts-ignore
 >(context?: Context<ReactReduxContextValue<S, A>> = ReactReduxContext) {
   const useStore =

src/hooks/useStore.ts

@@ -1,5 +1,5 @@
 import type { Context } from 'react'
-import type { Action as BasicAction, AnyAction, Store } from 'redux'
+import type { Action as BasicAction, UnknownAction, Store } from 'redux'
 import type { ReactReduxContextValue } from '../components/Context'
 import { ReactReduxContext } from '../components/Context'
 import {
@@ -15,7 +15,7 @@ import {
  */
 export function createStoreHook<
   S = unknown,
-  A extends BasicAction = AnyAction
+  A extends BasicAction = UnknownAction
   // @ts-ignore
 >(context?: Context<ReactReduxContextValue<S, A>> = ReactReduxContext) {
   const useReduxContext =
@@ -26,12 +26,12 @@ export function createStoreHook<
         createReduxContextHook(context)
   return function useStore<
     State = S,
-    Action extends BasicAction = A
+    Action2 extends BasicAction = A
     // @ts-ignore
   >() {
     const { store } = useReduxContext()!
     // @ts-ignore
-    return store as Store<State, Action>
+    return store as Store<State, Action2>
   }
 }
 

src/types.ts

@@ -5,7 +5,7 @@ import type {
   FunctionComponent,
 } from 'react'
 
-import type { Action, AnyAction, Dispatch } from 'redux'
+import type { Action, UnknownAction, Dispatch } from 'redux'
 
 import type { NonReactStatics } from 'hoist-non-react-statics'
 
@@ -25,7 +25,7 @@ export type DistributiveOmit<T, K extends keyof T> = T extends unknown
   ? Omit<T, K>
   : never
 
-export interface DispatchProp<A extends Action = AnyAction> {
+export interface DispatchProp<A extends Action<string> = UnknownAction> {
   dispatch: Dispatch<A>
 }