chore(redux): upgrade redux and react-redux

TODO.md

@@ -1,14 +1,16 @@
 # TODO
 - [x] update API docs
 - [x] use Mutative
-- [ ] Implementing non-invasive injection for DI
+- [ ] upgrade react/react-dom 17.x and 18.x
+- [x] upgrade redux v5
+- [x] upgrade react-redux v8.1.3 for React 17.x and 18.x
 - [x] upgrade react-native
+- [ ] add example with `bun`
+- [ ] add example with `vite`
+- [ ] Implementing non-invasive injection for DI
 - [ ] support TS 5.0 new decorator(https://github.com/tc39/proposal-decorators), [more detail](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-0.html#differences-with-experimental-legacy-decorators)
 - [ ] upgrade inversify v6
 - [ ] upgrade react-router v6.22.1
-- [ ] upgrade react/react-dom 17.x and 18.x
-- [ ] upgrade redux v5
-- [ ] upgrade react-redux v8.1.3 for React 17.x and 18.x
 - [ ] support `upgrade` CLI
 - [ ] dynamic unloading module
 - [ ] improve CLI about `bun`

packages/reactant-last-action/package.json

@@ -28,10 +28,10 @@
   "license": "MIT",
   "peerDependencies": {
     "reactant-module": "*",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   },
   "devDependencies": {
     "reactant-module": "^0.110.0",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   }
 }

packages/reactant-model/src/model.ts

@@ -62,7 +62,7 @@ export const model = <
         }
         const lastState = module[storeKey]?.getState();
         module[storeKey]!.dispatch({
-          type: module[identifierKey],
+          type: module[identifierKey]!,
           method: key,
           state: {
             ...lastState,

packages/reactant-module/package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "mutative": "^1.0.5",
     "reactant-di": "^0.110.0",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   },
   "devDependencies": {
     "react": "^17.0.2",

packages/reactant-module/src/core/createStore.ts

@@ -12,11 +12,11 @@ import {
   ServiceIdentifiersMap,
 } from 'reactant-di';
 import {
+  Action,
   AnyAction,
   applyMiddleware,
   combineReducers,
   createStore as createStoreWithRedux,
-  PreloadedState,
   Reducer,
   ReducersMapObject,
 } from 'redux';
@@ -66,7 +66,7 @@ interface CreateStoreOptions<T> {
   load: (...args: Parameters<Loader>) => void;
   dynamicModules: DynamicModules;
   pluginHooks: PluginHooks;
-  preloadedState?: PreloadedState<T>;
+  preloadedState?: T;
   devOptions?: DevOptions;
   originalStore?: ReactantStore;
   beforeReplaceReducer?: () => void;
@@ -245,7 +245,7 @@ export function createStore<T = any>({
                     return action._reactant === actionIdentifier &&
                       action.state[identifier!]
                       ? action.state[identifier!][key]
-                      : pureReducer(state, action);
+                      : pureReducer(state, action as AnyAction);
                   };
                   return Object.assign(serviceReducersMapObject, {
                     [key]: reducer,

packages/reactant-module/src/core/handlePlugin.ts

@@ -1,4 +1,4 @@
-import { ReducersMapObject, Reducer, PreloadedState } from 'redux';
+import type { ReducersMapObject, Reducer } from 'redux';
 import { PluginModule } from './plugin';
 import { PluginHooks, HandlePlugin } from '../interfaces';
 
@@ -19,9 +19,8 @@ export const handlePlugin: HandlePlugin = (
       );
     }
     if (typeof service.preloadedStateHandler === 'function') {
-      pluginHooks.preloadedStateHandler.push(
-        (preloadedState: PreloadedState<any>) =>
-          service.preloadedStateHandler!(preloadedState)
+      pluginHooks.preloadedStateHandler.push((preloadedState: any) =>
+        service.preloadedStateHandler!(preloadedState)
       );
     }
     if (typeof service.enhancer === 'function') {

packages/reactant-module/src/core/plugin.ts

@@ -1,11 +1,5 @@
 import type { FunctionComponent } from 'react';
-import type {
-  ReducersMapObject,
-  Middleware,
-  PreloadedState,
-  Reducer,
-  Store,
-} from 'redux';
+import type { ReducersMapObject, Middleware, Reducer, Store } from 'redux';
 import { injectable } from 'reactant-di';
 import { storeKey } from '../constants';
 import { Service } from '../interfaces';
@@ -17,9 +11,7 @@ abstract class PluginModule implements Service {
   /**
    * preloaded state handler for Redux
    */
-  preloadedStateHandler?(
-    preloadedState: PreloadedState<any>
-  ): PreloadedState<any>;
+  preloadedStateHandler?(preloadedState: any): any;
 
   /**
    * inject middleware for Redux

packages/reactant-module/src/decorators/action.ts

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 /* eslint-disable func-names */
 import { create } from 'mutative';
-import { Patches, ReactantAction, Service } from '../interfaces';
+import type { AnyAction } from 'redux';
+import type { Patches, Service } from '../interfaces';
 import {
   storeKey,
   actionIdentifier,
@@ -116,7 +117,7 @@ const action = (
             );
           }
         }
-        this[storeKey]!.dispatch<ReactantAction>({
+        this[storeKey]!.dispatch<AnyAction>({
           type: this[identifierKey]!,
           method: key,
           params: args,

packages/reactant-module/src/interfaces.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-use-before-define */
 import type {
   Store as ReduxStore,
-  PreloadedState,
   AnyAction,
   Middleware,
   Action,
@@ -78,7 +77,7 @@ export type ReduxDevToolsOptions = Pick<
   Exclude<keyof EnhancerOptions, 'actionSanitizer' | 'serialize'>
 >;
 
-export type TypePreloadedState<T> = PreloadedState<T>;
+export type TypePreloadedState<T> = T;
 
 export type Subscriptions = (() => void)[];
 
@@ -112,7 +111,7 @@ export type ReactantStore = ReduxStore<any, AnyAction> & {
 
 export type ReactantMiddleware = Middleware;
 
-export interface ReactantAction<T = any> extends Action<string | symbol> {
+export interface ReactantAction<T = any> extends Action<string> {
   method?: string;
   state: Record<string, T>;
   params: any[];

packages/reactant-redux/package.json

@@ -28,10 +28,10 @@
   "license": "MIT",
   "peerDependencies": {
     "reactant-module": "*",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   },
   "devDependencies": {
     "reactant-module": "^0.110.0",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   }
 }

packages/reactant-redux/test/index.test.ts

@@ -5,7 +5,6 @@ import {
   createContainer,
   createStore,
 } from 'reactant-module';
-import { Dispatch } from 'redux';
 import { redux } from '..';
 
 test('base redux with `useValue`', () => {
@@ -38,7 +37,7 @@ test('base redux with `useValue`', () => {
         action.type === 'add' ? [...state, action.payload] : state,
     },
     actions: {
-      add: (text: string) => (dispatch: Dispatch<AddTodoAction>) =>
+      add: (text: string) => (dispatch) =>
         dispatch({
           type: 'add',
           payload: { text, completed: false },
@@ -133,7 +132,7 @@ test('base redux with `useFactory`', () => {
         ) => (action.type === 'add' ? [...state, action.payload] : state),
       },
       actions: {
-        add: (text: string) => (dispatch: Dispatch<AddTodoAction>) =>
+        add: (text: string) => (dispatch) =>
           dispatch({
             type: 'add',
             payload: { text, completed: false },

packages/reactant-router/package.json

@@ -27,9 +27,9 @@
   ],
   "peerDependencies": {
     "react": "^16.12.0 || ^17",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.1.3",
     "reactant-module": "*",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   },
   "dependencies": {
     "connected-react-router": "^6.9.3",
@@ -38,9 +38,9 @@
   },
   "devDependencies": {
     "react": "^17.0.2",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.1.3",
     "reactant-module": "^0.110.0",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   },
   "license": "MIT"
 }

packages/reactant-router/src/router.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable consistent-return */
 import React, { PropsWithChildren, FunctionComponent } from 'react';
 import { PluginModule, injectable, inject, storeKey } from 'reactant-module';
-import type { ReducersMapObject, Store } from 'redux';
+import type { AnyAction, ReducersMapObject } from 'redux';
 import {
   connectRouter,
   ConnectedRouter,
   CALL_HISTORY_METHOD,
-  RouterAction,
   onLocationChanged,
   routerActions,
 } from 'connected-react-router';
@@ -66,7 +65,8 @@ class ReactantRouter extends PluginModule {
     this.autoCreateHistory = this.options?.autoCreateHistory ?? true;
     if (this.autoCreateHistory) {
       this.history = this.options.createHistory();
-      this.middleware = (store) => (next) => (action: RouterAction) => {
+      this.middleware = (store) => (next) => (_action) => {
+        const action = _action as AnyAction;
         if (action.type !== CALL_HISTORY_METHOD) {
           return next(action);
         }
@@ -113,23 +113,23 @@ class ReactantRouter extends PluginModule {
   }
 
   push(path: string, state?: LocationState) {
-    this.store?.dispatch(this.routerActions.push(path, state));
+    this.store?.dispatch(this.routerActions.push(path, state) as AnyAction);
   }
 
   replace(path: string, state?: LocationState) {
-    this.store?.dispatch(this.routerActions.replace(path, state));
+    this.store?.dispatch(this.routerActions.replace(path, state) as AnyAction);
   }
 
   go(n: number) {
-    this.store?.dispatch(this.routerActions.go(n));
+    this.store?.dispatch(this.routerActions.go(n) as AnyAction);
   }
 
   goBack() {
-    this.store?.dispatch(this.routerActions.goBack());
+    this.store?.dispatch(this.routerActions.goBack() as AnyAction);
   }
 
   goForward() {
-    this.store?.dispatch(this.routerActions.goForward());
+    this.store?.dispatch(this.routerActions.goForward() as AnyAction);
   }
 
   provider = (props: PropsWithChildren<any>) => {

packages/reactant-share/src/modules/coworker.ts

@@ -116,7 +116,8 @@ export class Coworker extends PluginModule {
 
     if (this.isCoworker && this.enablePatchesChecker) {
       // stricter checks to prevent cross-module state updates.
-      this.middleware = (store) => (next) => (_action: ReactantAction) => {
+      this.middleware = (store) => (next) => (action) => {
+        const _action = action as ReactantAction;
         const { _patches, type, method } = _action;
         // skip check for storage module change any state
         if (type === storageModuleName) return next(_action);

packages/reactant-share/src/modules/patchesChecker.ts

@@ -36,7 +36,8 @@ export class PatchesChecker extends PluginModule {
     }
   }
 
-  middleware: Middleware = (store) => (next) => (_action: ReactantAction) => {
+  middleware: Middleware = (store) => (next) => (action) => {
+    const _action = action as ReactantAction;
     const { _patches, type, method } = _action;
     let hasIsolatedState: boolean;
     _patches?.forEach(({ path, op, value }, index) => {

packages/reactant-share/src/modules/router.ts

@@ -16,6 +16,7 @@ import type {
   RouterState,
 } from 'reactant-router';
 import type { LocationState } from 'history';
+import type { AnyAction } from 'redux';
 import {
   routerModuleName,
   SharedAppOptions,
@@ -391,7 +392,7 @@ class ReactantRouter extends BaseReactantRouter {
 
   protected dispatchChanged(router: RouterState) {
     this.store?.dispatch(
-      this.onLocationChanged(router.location, router.action)!
+      this.onLocationChanged(router.location, router.action) as AnyAction
     );
   }
 

packages/reactant-storage/package.json

@@ -29,18 +29,18 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^16.12.0 || ^17",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.1.3",
     "reactant-module": "*",
-    "redux": "^4.1.0",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0"
   },
   "dependencies": {
     "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "react": "^17.0.2",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.1.3",
     "reactant-module": "^0.110.0",
-    "redux": "^4.1.0"
+    "redux": "^5.0.1"
   }
 }

packages/reactant/package.json

@@ -36,7 +36,7 @@
     "react": "^16.12.0 || ^17"
   },
   "dependencies": {
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.1.3",
     "reactant-module": "^0.110.0"
   },
   "devDependencies": {

packages/reactant/src/hooks/useConnector.ts

@@ -47,13 +47,13 @@ import { ShallowEqual } from '../interfaces';
  */
 export function useConnector<T>(
   selector: (container: Container) => T,
-  shallowEqual?: ShallowEqual
+  shallowEqual?: ShallowEqual<T>
 ) {
   try {
     const container = useContext(ContainerContext);
     return useSelector(
-      () => selector(container!) as Record<string, any>,
-      shallowEqual || areShallowEqualWithObject
+      () => selector(container!) as unknown,
+      (shallowEqual || areShallowEqualWithObject) as any
     ) as T;
   } catch (e) {
     try {

packages/reactant/src/interfaces.ts

@@ -48,7 +48,4 @@ export interface App<T, S extends any[], R extends Renderer<S>> {
   bootstrap(...args: S): ReturnType<R> | Promise<R>;
 }
 
-export type ShallowEqual = (
-  a: Record<string, any>,
-  b: Record<string, any>
-) => boolean;
+export type ShallowEqual<T> = (a: T, b: T) => boolean;