上节课我们完成了最后一项优化，这节课我们开始介绍如何通redux来完成数据共享。

回顾

在开始这节课的内容之前，我们来对上节课的内容来做一个简单那回顾

  • UI组件和容器组件混在一个文件中来编写
  • 使用Provider组件来批量给容器组件传递store
  • react-redux自动监测redux的状态改变
  • mapDispatchToProps可以简写车给一个对象
  • 不再暴露UI组件

以上便是我们上节课的主要要点，接下来，我们来开始这节课的内容。

Person组件

我们之前的案例中是不是只有一个组件啊？其实我们之前的案例中早就可以实现数据共享了，但是就只有一个组件怎么共享呢，那么我们就再加一个组件。

那么在我定义Preson组件之前，我们是不是要创建两个文件？一个是person_action_creator.js另一个是person_reducer.js？因为Person组件要和redux打交道肯定要有自己的reducer和自己的action creator，那么我们把文件先建好。

但是还有一个问题，我们这么写到后来文件是不是就越来越乱啊？那么我们来建两个文件夹叫actions和reducers，然后我们把这些文件放进去，而且也就不需要加后缀了，我们就叫person.js。

然后我们定义组件，先定义一个UI组件，我们来看一下效果：

image-20220119153120669

我们的Person组件是不是就可以成功渲染了？那么我们来定义容器组件能够让Person组件拿到redux中的值。

需求

现在嫩我们来做一个需求，我们要在Person组件中输入相关信息，然后点击按钮，就让Sum组件来展示Person信息，然后我们在Sum组件中点击这些按钮，就让Person组件来展示Sum中的求和之后的和。那么我们怎么处理？是不是要把Person的数据和Sum的数据都放在redux里面啊？

定义Person组件

我们知道我们的具体需求了之后，那么我们先来把Person的基础功能先完成：

export default class Person extends Component {
  render() {
    return (
      <div>
        <input ref={c=>this.name=c} type="text" placeholder="input name" />
        <input ref={c=>this.age=c} type="text" placeholder="input age" />
        <button onClick={this.addPerson}>submit</button>
        <h2>当前求和为:???</h2>
      </div>
    )
  }
  addPerson = ()=>{
    const name = this.name.value;
    const age = this.age.value;
    console.log(name,age);
  }
}

我们来看一下，这是最基本的组件页面元素，我们看一下我们的onClick事件的回调，我们通过ref获取了输入的值，然后打印出来，因为我们还没有定义操作redux的相关内容。那么就看能不能实现打印

image-20220119161012129

我们现在是可以打印出来的。接下来我们再添加交互是不是就可以了。

总结

本节为准备工作，没有什么重要知识点。

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/share_data_person_component/