React类组件（TypeScript）集成Redux实现示例及问题解决

问题核心原因 #

你遇到的编译错误主要来自这几个点：

• 未定义全局RootState类型，导致mapStateToProps无法正确推断state结构
• 组件Props未合并Redux注入的属性（PropsFromRedux）
• 未明确incrementCounter等action的类型定义
• 未导出经过connect处理后的最终组件

完整实现代码 #

1. 定义Redux基础类型与Action枚举 #

// store/types.ts
export enum ActionTypes {
  INCREMENT = 'counter/increment'
}

export type CounterAction = {
  type: ActionTypes.INCREMENT;
};

// 全局Redux状态结构定义
export type RootState = {
  count: number;
};

2. 编写Action Creator #

// store/actions.ts
import { ActionTypes, CounterAction } from './types';

export const incrementCounter = (): CounterAction => ({
  type: ActionTypes.INCREMENT
});

3. 实现Counter Reducer #

// store/reducers/counterReducer.ts
import { RootState, CounterAction, ActionTypes } from '../types';

const initialState: RootState = {
  count: 0
};

export const counterReducer = (state = initialState, action: CounterAction): RootState => {
  switch (action.type) {
    case ActionTypes.INCREMENT:
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

4. 创建Redux Store #

// store/index.ts
import { createStore } from 'redux';
import { counterReducer } from './reducers/counterReducer';

export const store = createStore(counterReducer);

5. 改造Counter类组件 #

// components/Counter.tsx
import React from 'react';
import { connect, ConnectedProps } from 'react-redux';
import { RootState } from '../store/types';
import { incrementCounter } from '../store/actions';

// 组件自身接收的自定义属性
type CounterOwnProps = {
  exampleProp: string;
};

type CounterState = {
  exampleState: string;
};

// 映射Redux状态到组件Props
const mapStateToProps = (state: RootState) => ({
  count: state.count
});

// 映射action到组件Props
const mapDispatchToProps = {
  incrementCounter
};

// 创建连接器
const connector = connect(mapStateToProps, mapDispatchToProps);

// 合并组件自身属性与Redux注入属性
type CounterProps = CounterOwnProps & ConnectedProps<typeof connector>;

class CounterComponent extends React.Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);
    this.state = {
      exampleState: ''
    };
  }

  render() {
    const { exampleProp, count, incrementCounter } = this.props;
    return (
      <div>
        <p>自定义属性：{exampleProp}</p>
        <p>当前计数：{count}</p>
        <button onClick={incrementCounter}>点击增加计数</button>
      </div>
    );
  }
}

// 导出经过Redux连接后的组件
export const Counter = connector(CounterComponent);

6. 在应用中使用组件 #

// App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import { Counter } from './components/Counter';

const App = () => {
  return (
    <Provider store={store}>
      <Counter exampleProp="这是组件自定义属性" />
    </Provider>
  );
};

export default App;

关键注意事项 #

• RootState类型：必须定义全局的RootState描述store完整结构，确保mapStateToProps类型推断正确
• Props合并：通过ConnectedProps<typeof connector>自动获取Redux注入的属性类型，再与组件自身属性合并，避免类型遗漏
• Action类型安全：明确Action的枚举与结构，防止dispatch不符合规范的action
• 组件导出：最终导出的是经过connect包裹后的组件，而非原始的CounterComponent

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