如何在Redux中合并PeopleReducer与CompanyReducer并在App.tsx中实现

1. 正确合并Reducer（推荐使用Redux Toolkit） #

创建根Reducer文件（比如rootReducer.ts），用combineReducers将两个子Reducer绑定到不同的命名空间下：

// rootReducer.ts
import { combineReducers } from '@reduxjs/toolkit'; // 原生Redux可导入自'redux'
import peopleReducer from './PeopleReducer';
import companyReducer from './CompanyReducer';

const rootReducer = combineReducers({
  people: peopleReducer, // 对应store中的state.people
  company: companyReducer // 对应store中的state.company
});

export default rootReducer;

2. 创建Redux Store #

用Redux Toolkit的configureStore简化store配置（自带中间件和DevTools支持）：

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

export const store = configureStore({
  reducer: rootReducer
});

// TypeScript类型声明（可选，提升开发体验）
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

若使用原生Redux，代码如下：

// store.ts
import { createStore } from 'redux';
import rootReducer from './rootReducer';

export const store = createStore(rootReducer);

3. App.tsx中注入Store #

在根组件外层用Provider包裹整个应用，将store传入：

// App.tsx
import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
// 导入你的业务组件
import PeopleList from './PeopleList';
import CompanyInfo from './CompanyInfo';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <PeopleList />
        <CompanyInfo />
      </div>
    </Provider>
  );
}

export default App;

4. 组件中正确访问合并后的State #

合并后需要通过命名空间访问对应reducer的state，比如用useSelector时指定路径：

// PeopleList.tsx
import { useSelector } from 'react-redux';
import { RootState } from './store'; // TypeScript用，类型提示

function PeopleList() {
  // 必须通过state.people获取原PeopleReducer管理的状态
  const peopleData = useSelector((state: RootState) => state.people);
  
  return (
    <ul>
      {peopleData.map(person => (
        <li key={person.id}>{person.name}</li>
      ))}
    </ul>
  );
}

// CompanyInfo.tsx
import { useSelector } from 'react-redux';
import { RootState } from './store';

function CompanyInfo() {
  const companyData = useSelector((state: RootState) => state.company);
  
  return (
    <div>
      <h3>{companyData.name}</h3>
      <p>地址：{companyData.address}</p>
    </div>
  );
}

常见错误排查 #

• 未用Provider包裹根组件：组件无法获取store实例，必然无法正常运行
• state访问路径错误：合并后每个reducer对应store下的独立属性，不能再直接访问原reducer的state结构
• 依赖版本不兼容：确保react-redux与redux（或@reduxjs/toolkit）版本匹配

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