十、react-redux中共享数据状态

一、案例：定义一个Person组件，和Count组件通过redux共享数据

1. 为Person组件编写reducer和action
   reducers/person.js

const initState = [{id:'001',name: 'Tom', age: 18}]
export default function personReducer(prestate=initState, action) {
    const {type, data} = action
    switch(type) {
        case 'addPerson':
            return [data, ...prestate]
        default:
            return prestate

    }
}

actions/person.js

export const addPerson = personobj => ({type: 'addPerson',data:personobj})

重点：Person的reducer和Count的Reducer要使用combineReducers进行合并， 合并后的总状态是一个对象！！！
store.js

import {createStore,applyMiddleware,combineReducers} from 'redux'
import countReducer from './reducers/count'
import personReducer from './reducers/person'
import thunk from 'redux-thunk'
//利用combineReducers函数将两个reducer进行合并
//注意：最后合成的store是一个对象
const allReducers = combineReducers({
    countReducer,
    personReducer
})

export default createStore(allReducers, applyMiddleware(thunk))

containers/person.js

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

class Person extends Component {
    addPerson = () => {
        const name = this.nameNode.value
        const age = this.ageNode.value
        this.props.addPerson({id:nanoid(),name,age})
    }
    render() {
        return (
            <div>
                <input ref={c => this.nameNode=c} type="text" placeholder="请输入名字"/>
                <input ref={c => this.ageNode=c} type="text" id="" placeholder="请输入年龄"/>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {
                        this.props.persons.map((obj) => {
                            return <li key={obj.id}>{obj.name}-{obj.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}
export default connect(
    state => ({persons:state.personReducer,}),
    {addPerson}
)(Person)

• 在Count组件中若想要获取personReducer中的状态，则需要在Count的容器组件中映射状态

state => ({
        count: state.countReducer,
        personNum: state.personReducer
    })
然后即可通过this.props.personNum.length来获取到Person数组的长度

二、如何在react中生成一个唯一的标识id

1. 当对数据进行遍历时，需要绑定一个key值，根据diffing算法，可知此时的此时的id最好是一个唯一值，那么如何方便快捷的生成一个唯一的id值呢？
2. 步骤：

（1）npm install nanoid
（2）import {nanoid} from 'nanoid
（3）id：nanoid()
此时会自动生成一个唯一的id标识，如下图：