如何使用connect()函数将含多个组件的文件连接到Redux

方案1：定义组件时直接包裹connect #

如果每个组件对应的mapStateToProps、action映射逻辑不同，直接在组件定义的位置用对应参数的connect包裹即可，示例代码：

// 单独定义每个组件对应的状态/action映射（如果各组件逻辑不同的话）
const mapStateForKierowcy = state => ({ /* 该组件需要的状态 */ })
const mapStateForRozliczeniaMojeAuto = state => ({ /* 该组件需要的状态 */ })
const mapStateForRozliczeniaSwojeAuto = state => ({ /* 该组件需要的状态 */ })

export const PageKierowcyTableView = connect(mapStateForKierowcy, actions)((props) =>{
  return (
    <JSX />
  )
});

export const PageRozliczeniaNaMoimAucieTable = connect(mapStateForRozliczeniaMojeAuto, actions)((props) => {
  return (
    <JSX />
  );
});

export const PageRozliczeniaNaSwoimAucieTable = connect(mapStateForRozliczeniaSwojeAuto, actions)((props) => {
  return (
    <JSX />
  );
});

如果所有组件共用同一套状态和action映射逻辑，可以提前封装公共的高阶组件减少重复代码：

// 封装公共连接逻辑
const commonConnect = connect(mapStateToProps, actions)

export const PageKierowcyTableView = commonConnect((props) =>{
  return (
    <JSX />
  )
});

export const PageRozliczeniaNaMoimAucieTable = commonConnect((props) => {
  return (
    <JSX />
  );
});

export const PageRozliczeniaNaSwoimAucieTable = commonConnect((props) => {
  return (
    <JSX />
  );
});

方案2：先定义纯组件，底部统一导出连接后的版本 #

如果需要保留未连接的纯组件用于单元测试等场景，可以先定义不带export的纯组件，再在文件底部统一导出连接后的版本：

// 定义纯组件，不连接Redux
const PageKierowcyTableView = (props) =>{
  return (
    <JSX />
  )
};

const PageRozliczeniaNaMoimAucieTable = (props) => {
  return (
    <JSX />
  );
};

const PageRozliczeniaNaSwoimAucieTable = (props) => {
  return (
    <JSX />
  );
};

// 底部统一导出连接后的组件
export const ConnectedPageKierowcyTableView = connect(mapState1, actions)(PageKierowcyTableView)
export const ConnectedPageRozliczeniaNaMoimAucieTable = connect(mapState2, actions)(PageRozliczeniaNaMoimAucieTable)
export const ConnectedPageRozliczeniaNaSwoimAucieTable = connect(mapState3, actions)(PageRozliczeniaNaSwoimAucieTable)

// 如有需要也可以同时导出纯组件用于测试
export {
  PageKierowcyTableView as PurePageKierowcyTableView,
  PageRozliczeniaNaMoimAucieTable as PurePageRozliczeniaNaMoimAucieTable,
  PageRozliczeniaNaSwoimAucieTable as PurePageRozliczeniaNaSwoimAucieTable
}

注：如果部分组件不需要访问Redux状态或触发action，无需包裹connect，直接正常导出即可。

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