12.react-redux工具

react-redux

react-redux 针对性解决了redux的几个使用上的问题:

1. 每次使用redux都要引入store
2. 数据更新需要手动调用store.subscribe()来订阅
3. actionCreator中要进行手动的派发action，这样他就不够纯粹。

安装

npm install react-redux -S
或者
yarn add react-redux

react-redux的核心组件

import {Provider,connect} from "react-redux"

1. Provider提供者，在他的属性上store={store}将数据派发给容器组件
   用Provider标签将组件根节点包裹起来
2. connect组件 用于连接容器组件与ui组件
   connect返回一个函数，函数参数接受UI组件，返回值是一个容器组件|智能组件

export default connect(mapStateToProps,mapDispathcToProps)(UI组件|展示组件|木偶组件)

流程

1. 使用Provider组件

将组件的根节点用Provider标签包裹起来，此时需要传参，引入store，把store传给Provider

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import {Provider} from "react-redux"
import store from './store'

ReactDOM.render(
  <Provider store={store}>
     <App/>
  </Provider>
   ,
  document.getElementById('root')
);

2. 使用connect组件

2.1 第一个参数 mapStateToProps

这个mapStateToProps方法的返回值是一个对象，作用是将redux中的状态直接映射到ui组件的属性上面去。

1. mapStateToProps中的state形参就相当于store.getState()
2. 当redux的状态发生了改变，容器组件就会知道状态的改变，然后把最新的状态通过属性方式传递给UI组件，UI组建的属性发生了改变，render函数也就会执行，进行dom的渲染。在这个过程中容器组件自动帮你实现了store.subscribe()这一过程

import {connect} from "react-redux"

const mapStateToProps = state =>{
   return {
     todos : state.todoList.todos
   }
}

export default connect(mapStateToProps)(todoInfo)

2.2 第二个参数mapDispatchToProps

这个参数的作用是将redux管理的更改action直接添加到ui组件的props属性上去，以便方便快捷的调用action方法。

1. 这个方法返回什么，ui组件的属性上就会有什么。
2. 这个方法的主要作用是将更改状态的方法放入到ui组建的属性上面去。

import {connect} from "react-redux"

<!-- const mapDispatchToProps = dispatch =>{
  return addNewTodo(title){
    let action = actionCreators.addNewTodo(title);
    dispatch(action)
  }
} -->
<!-- 简化写法 -->
const mapDispatchToProps = actioncreators

//调用方法
this.props.addNewTodo(title)


// 注意，这些action方法在组件将需要手动传递‘
<LiItem {...this.props} key={item.id} item={item} ></LiItem>

在actionCreators中不再需要用store.dispatch来派发action,而是直接return action,因此也不必引入store

addNewTodo(title){
    let action = { 
      type:ADD_NEW_TODO, 
      title
    }
    return action
  },

深拷贝与浅拷贝回忆

1.浅拷贝

浅拷贝是指对第一层的数据进行了拷贝，对于第二层的数据只引用了数据的地址，不是获得了一个新的数据。
使用展开运算符获得的是浅拷贝

2. 深拷贝

深拷贝是指获得了完全独立的新的数据。地址与原有的数据是不同的。
深拷贝的方法： 可以对多层的数据进行逐层拷贝，或者使用JSON.parse(JSON.stringify(obj))