在独立的React组件和Redux之间传递数据

17 浏览
0 Comments

在独立的React组件和Redux之间传递数据

我对React和Redux非常陌生。我正在尝试从一个组件传递数据到另一个组件，但它们之间没有父子关系，彼此独立。有人可以帮我吗？以下是我的代码。

export class EmpSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Empnumber: ''
    };
  }
  updateEmpNumber(e) {
    this.setState({Empnumber: e.target.value});
  }
  render() {
    return (
        

            
            
        

    );
  }
}
function mapStateToProps(state){
  return{
    Empnumber: state.Empnumber
  };
}
export default connect(mapStateToProps)(EmpSearch);

我想要发送EmpNumber的另一个文件如下：

class EmpDetail extends React.Component {
  render() {
    return (
        
    );
  }
}
export default EmpDetail;

0

1 答案

0 Comments

在React和Redux中，当我们需要在独立的组件之间传递数据时，可能会遇到以下问题：如何将数据从一个组件传递到另一个组件，并将其存储在Redux的store中。

为了解决这个问题，我们可以使用Redux的action和reducer机制。当我们想要更新Redux store的状态时，我们可以通过dispatch一个action到reducer，并将数据作为payload发送给reducer。reducer根据action的类型来更新store中的数据。

在上面的例子中，我们可以看到一个名为employeeReducer的reducer函数。它是一个巨大的switch语句，根据传入的action类型返回新的state。

在EmpSearch组件中，我们可以看到如何将数据传递给Redux store。通过dispatch一个action，并将输入框中的值作为payload发送给reducer。不再需要使用组件自身的state来存储数据。

在EmpDetail组件中，我们可以看到如何从Redux store中获取数据。通过connect函数将组件连接到store，并使用mapStateToProps函数将store中的数据映射到组件的props中。

总结一下，要在独立的React组件之间传递数据并存储在Redux store中，我们需要做以下几个步骤：

1. 创建一个reducer函数，根据不同的action类型更新store中的数据。

2. 在发送数据的组件中，使用dispatch函数将数据作为payload发送给reducer。

3. 在接收数据的组件中，使用connect函数将组件连接到store，并使用mapStateToProps函数将store中的数据映射到组件的props中。

希望这篇文章对你有所帮助。如果你遇到了上述提到的错误信息，可能是因为你没有正确配置Redux的Provider组件或没有将store作为prop传递给Connect组件。需要确保你的根组件被包裹在Provider组件中，并正确地传递了store。

0