采用HOOKS访问React-redux中的数据， useDispatch, useSelector，immutableJs,shallowEqual

当我们访问我们react-redux中数据的时候，我们平时经常采用的就是通过connect，connect目的就是连接Ui然后传递mapdispatchtoprops和mapstatetoprops。mapdispatchtoprops目的就是为了派发请求拿数据或者更改react-redux中的数据，mapdispatchtoprops目的就是为了能拿到我们存放到redux中的数据。 比如我们经常写的代码

```js
import React, { Component } from 'react';
import { connect, } from 'react-redux';
import { addperson } from '../redux/action';
import { nanoid } from 'nanoid';
class Person extends Component {
  addperson = () => {
    this.props.addperson({id:nanoid(),name:'张三',age:19,sex:'女'})
  }
  render () {
    return (
      <div>
        <h1>展示一堆人</h1>
          <ul>
          {
            this.props.personobj.map((item) => {
              return <li key={item.id}>{item.name}{item.age}{item.sex}</li>
            })
          }
          </ul>
        <button onClick={this.addperson}>添加一个人</button>
        <h3>上面的和为{this.props.sum }</h3>
      </div>
    );
  }
}

function mapStateToProps (state) {
  return {
    personobj: state.person,
    sum:state.count
  }
}

function mapDispatchToProps (dispatch) {
  return {
    addperson:(arry)=>{dispatch(addperson(arry))}
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Person)

我们如果通过使用 useDispatch, useSelector怎么拿到actioncreater中的动作以及redux中的状态了呢 ``

`````js
```import React, { memo,} from 'react'
import { nanoid } from 'nanoid'
import { addperson } from '../redux/action';
import { shallowEqual, useDispatch, useSelector} from 'react-redux'
const person = memo((props) => {
  const dispatch = useDispatch()
  function addperson1 () {
    dispatch(addperson({id:nanoid(),name:'张三',age:19,sex:'女'}))
  }
  const selector = useSelector((state) => ({
    personobj: state.get("person"),
    sum:state.get("count")
  }),shallowEqual)
  console.log(typeof(selector.personobj))
  return (
    <div>
    <h1>展示一堆人</h1>
      <ul>
      {
        selector.personobj.map((item) => {
          return <li key={item.id}>{item.name}{item.age}{item.sex}</li>
        })
      }
      </ul>
    <button onClick={addperson1}>添加一个人</button>
    <h3>上面的和为{selector.sum }</h3>
  </div>
  )
})

export default person

reducer中的代码

import { List } from "immutable"
const initState = List([{ id: 1, name: '李四', age: '18', sex: '男' }])
export default function personreducer (preState=initState,action) {
  const { type, data } = action
  switch (type) {
    case 'addperson':
      // return  [data,...preState]
      preState.push(data)
      console.log(preState)
  return preState.push(data)
    default:
     return  preState
  }
}

在我们平常使用reducer的时候我们知道他是一个纯函数，所以我们不能直接让这个state直接等于我们的action.data我们一般都是提前对他进行一个拷贝，但是我们知道如果我们这个里面的东西太多了的话，每次我们进行复制浅拷贝，都是对我们性能很大的影响的，所以我们可以尝试对其进行性能优化，所以我们引入immutablejs