Redux compose函数TypeScript类型定义问题求助

Hey there! Let's break down why your current approach isn't working and fix that compose type issue once and for all.

Why Your Previous Solution Failed #

Let's start with the root causes:

1. Unresolved any types: Your IMapStateToProps and IMapDispatchToProps still had any for key properties (like walterUser and upDateWalterInitailUser). TypeScript can't infer proper compose types when critical type information is hidden behind any.
2. Misplaced service call in mapStateToProps: You're directly calling getProfile() (a service) inside mapStateToProps, which is meant to extract data from the Redux store state. This breaks the link between your store's type (IStoreState) and the props injected by connect, confusing TypeScript.
3. Unclear prop relationships: You didn't explicitly connect your component's own props (IEditAccountProps) with the props injected by connect and withRouter, so TypeScript couldn't validate the type flow through compose.

Step-by-Step Fix #

Let's rewrite your container.ts with proper type definitions, leveraging TypeScript's inference and Redux's built-in utilities:

import { connect, ConnectedProps } from "react-redux";
import { compose, AnyAction } from "redux";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { getProfile, updateProfile } from "../../../services/clients/user";
import { updateUserInitial } from "../../../actions/initialUser";
import { IStoreState } from "../../typeScriptInclude";
import { ThunkDispatch } from "redux-thunk";
import { Profile } from "./component/utilities/includeTypeScript";
import { IEditAccountProps as OwnProps } from './component/EditAccount';

// Fix: Rename for clarity and define exact type
interface IUpdateWalterInitialUserProps {
  walterUser: { first_name: string; last_name: string };
}

// Fix: Extract data from Redux state, not a direct service call
// Replace `state.user.profile` with the actual path to user data in your store
const mapStateToProps = (state: IStoreState) => ({
  isConnect: state.isConnect,
  walterUser: state.user.profile as Profile,
  upDateProfile: (data: Profile) => updateProfile(data),
});

// Auto-infer state props from mapStateToProps return type
type StateProps = ReturnType<typeof mapStateToProps>;

type AppDispatch = ThunkDispatch<IStoreState, void, AnyAction>;

const mapDispatchToProps = (dispatch: AppDispatch) => ({
  upDateWalterInitialUser: (form: IUpdateWalterInitialUserProps) => 
    dispatch(updateUserInitial(form)),
});

// Auto-infer dispatch props from mapDispatchToProps return type
type DispatchProps = ReturnType<typeof mapDispatchToProps>;

// Create a connector and auto-infer connected props
const connector = connect(mapStateToProps, mapDispatchToProps);
type ConnectedPropsType = ConnectedProps<typeof connector>;

// Fix: Compose without manual `<any>` - TypeScript infers types automatically now
export default compose(
  withRouter, // Injects RouteComponentProps
  connector
);

Key Improvements Explained #

1. Eliminated any types: We use ReturnType to auto-infer props from mapStateToProps and mapDispatchToProps, and explicitly define all other types.
2. Fixed mapStateToProps logic: We now pull user data directly from the Redux store state, aligning with Redux best practices and giving TypeScript a clear type path.
3. Leveraged ConnectedProps: This Redux utility automatically extracts the props injected by connect, so we don't have to manually duplicate those types.
4. Auto-inferred compose types: With all intermediate types clearly defined, TypeScript can automatically resolve the correct input/output types for compose without manual generic arguments.

Final Check for index.ts #

Make sure your EditAccount component accepts the full set of props:

import EditAccount from "./component/EditAccount";
import container from './container';

// The composed HOC now expects EditAccount to accept:
// OwnProps (IEditAccountProps) + ConnectedPropsType + RouteComponentProps
export default container(EditAccount);

Bonus: Consider Redux Toolkit #

If you're still running into type headaches, migrate to Redux Toolkit (the official recommended approach for Redux). It auto-generates most types for you, eliminating manual type definitions for actions, reducers, and connect logic entirely.

内容的提问来源于stack exchange，提问作者user8930944