【React】React-redux多组件间的状态传递

效果（部分完整代码在最底部）：

1. 编写 Person 组件
   上面的 Count 组件，已经在前面几篇写过了，也可以直接翻到最底部看

首先我们需要在 containers 文件夹下编写 Person 组件的容器组件
首先我们需要编写 index.jsx 文件，在这个文件里面编写 Person 组件的 UI 组件，并使用 connect 函数将它包装，映射它的状态和方法

编写 UI 组件架构

<div>
    <h2>我是 Person 组件,上方组件求和为:{
   this.props.countAll}</h2>
    <input ref={
   c => this.nameNode = c} type="text" placeholder="输入名字" />
    <input ref={
   c => this.ageNode = c} type="text" placeholder="输入年龄" />
    <button onClick={
   this.addPerson}>添加</button>
    <ul>
        {
   
            this.props.persons.map((p) => {
   
                return <li key={
   p.id}> {
   p.name}--{
   p.age}</li>
            })
        }
    </ul>
</div>

我们可以看到这里采用了 ref 来获取到当前事件触发的节点，并通过 this.addPerson 的方式给按钮绑定了一个点击事件

编写点击事件回调

addPerson = () => {
   
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = {
    id: nanoid(), name, age }
    this.props.add(personObj)
    this.nameNode.value = ''
    this.ageNode.value = ''
}

在这里我们需要处理输入框中的数据，并且将这些数据用于创建一个 action 对象，传递给 store 进行状态的更新

在这里我们需要回顾的是，这里我们使用了一个 nanoid 库，这个库我们之前也有使用过

下载，引入，暴露

import {
    nanoid } from 'nanoid'

暴露的 nanoid 是一个函数，我们每一次调用时，都会返回一个不重复的数，用于确保 id 的唯一性，同时在后面的 map 遍历的过程中，我们将 id 作为了 key 值，这样也确保了 key 的唯一性，关于 key 的作用，可以看看 diffing 算法的文章

状态管理
在这里我们需要非常熟练的采用 this.props.add 的方式来更新状态

那么它是如何实现状态更新的呢？我们来看看

在我们调用 connect 函数时，我们第一次调用时传入的第二个参数，就是用于传递方法的，我们传递了一个 add 方法

export default connect(
    state => ({
    persons: state.person, countAll: state.count }),//映射状态
    {
    add: createAddPersonAction }
)(Person);

它的原词是：mapDispatchToProps

我的理解是，传入的东西会被映射映射成 props 对象下的方法&#x