react-redux
react-redux 针对性解决了redux的几个使用上的问题:
- 每次使用redux都要引入store
- 数据更新需要手动调用store.subscribe()来订阅
- actionCreator中要进行手动的派发action,这样他就不够纯粹。
安装
npm install react-redux -S
或者
yarn add react-redux
react-redux的核心组件
import {Provider,connect} from "react-redux"
- Provider提供者,在他的属性上store={store}将数据派发给容器组件
用Provider标签将组件根节点包裹起来 - 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组件的属性上面去。
- mapStateToProps中的state形参就相当于store.getState()
- 当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方法。
- 这个方法返回什么,ui组件的属性上就会有什么。
- 这个方法的主要作用是将更改状态的方法放入到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))