react-redux多个组件数据共享的方法

src
├─App.jsx
├─index.js
├─redux
|   ├─constant.js
|   ├─store.js
|   ├─reducers
|   |    ├─count.js
|   |    └person.js
|   ├─actions
|   |    ├─count.js
|   |    └person.js
├─containers
|     ├─Person
|     |   └index.jsx
|     ├─Count
|     |   └index.jsx

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
+ export const ADD_PERSON = 'add_person'

/src/redux/actions/person.js

/* 
  该文件专门为Person组件生成action动作对象
*/
import { ADD_PERSON } from "../constant";
// 创建增加一个person的action动作对象
export const createAddPersonAction = personObj => ({ type: ADD_PERSON, data: personObj })

/src/redux/reducers/person.js

/* 
  1.该文件用于创建一个为Person组件服务的reducer函数
  2.reducer函数会接收到两个参数，分别为之前的状态（prevState）和动作对象（action）
*/
import { ADD_PERSON } from "../constant";
const initState = [{ id: 001, name: 'tom', age: 18 }]
export default function personReducer(prevState = initState, action) {
  const { type, data } = action
  switch (type) {
    case ADD_PERSON:
      return [data, ...prevState]
    default:
      return prevState
  }
}

/src/redux/store.js

- import { legacy_createStore as createStore, applyMiddleware } from 'redux';
// 引入combineReducers，用于合并reducer
+ import { legacy_createStore as createStore, applyMiddleware, combineReducers } from 'redux';
import countReducer from './reducers/count'
// 引入为Person组件服务的reducer
+ import personReducer from './reducers/person';
import thunk from 'redux-thunk'

+ // 合并reducer
+ const allReducer = combineReducers({
+   count: countReducer,
+   persons: personReducer
+ })
// 暴露store
- export default createStore(countReducer, applyMiddleware(thunk))
+ export default createStore(allReducer, applyMiddleware(thunk))

import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddPersonAction } from '../../redux/actions/person'

class Person extends Component {

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

  render() {
    return (
      <div>
        <h2>我是Person组件，上方组件求和为：{this.props.count}</h2>
        <input ref={currentNode => this.nameNode = currentNode} 
               type="text" placeholder='输入名字' />
        <input ref={currentNode => this.ageNode = currentNode} 
               type="text" placeholder='输入年龄' />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.personArr.map(personObj => {
              return <li key={personObj.id}>{personObj.name}---{personObj.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}
export default connect(
  state => ({ personArr: state.persons, count: state.count }),
  { dispatchAddPerson: createAddPersonAction }
)(Person)

<h2>我是Count组件，下方组件总人数为：{this.props.person}</h2>
//
//
export default connect(
  state => ({ count: state.count, person: state.persons.length }),
  {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction
  }
)(Count)