如何从组件A访问组件B中的Redux Store并用于API调用？

因为组件B已经作为Redux Store的Provider包裹了整个应用，所以不管组件A处于哪个层级，都可以直接通过Redux的官方API获取Store中的状态，以下是两种常用实现方式：

1. 函数组件：使用useSelector钩子 #

组件A如果是函数组件，直接通过useSelector从Store中取出表单数据，点击按钮时用该数据发起API请求即可：

import { useSelector } from 'react-redux';

const ComponentA = () => {
  // 根据实际Store结构调整取值路径，示例假设表单数据存在state.formData下
  const formData = useSelector(state => state.formData);

  const handleSubmit = () => {
    // 发起API调用
    fetch('/your-api-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    })
    .then(res => res.json())
    .then(result => {
      // 处理API返回结果
      console.log('提交成功', result);
    })
    .catch(error => {
      // 处理错误
      console.error('提交失败', error);
    });
  };

  return <button onClick={handleSubmit}>提交表单</button>;
};

export default ComponentA;

2. 类组件：使用connect高阶函数 #

如果组件A是类组件，通过connect将Store中的状态映射到组件props，再在点击事件中使用：

import React from 'react';
import { connect } from 'react-redux';

class ComponentA extends React.Component {
  handleSubmit = () => {
    const { formData } = this.props;
    // 发起API调用
    fetch('/your-api-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    })
    .then(res => res.json())
    .then(result => console.log('提交成功', result))
    .catch(error => console.error('提交失败', error));
  };

  render() {
    return <button onClick={this.handleSubmit}>提交表单</button>;
  }
}

// 映射Store状态到组件props，根据实际结构调整路径
const mapStateToProps = state => ({
  formData: state.formData
});

export default connect(mapStateToProps)(ComponentA);

关键说明 #

• 无需修改现有组件结构，只要组件A处于组件B（Provider）的包裹范围内，就能直接访问Store。
• 确保useSelector或mapStateToProps中的取值路径与Store中表单数据的实际存储路径一致。

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