前言
学习完了redux，仅仅处于一个会使用的层次，这还远远不够，要找出它的最佳使用方法。
一、redux最佳实践
当我们最初学会使用redux的时候，我们基本都会遇到一些问题，这里主要来说说这两个问题。
- 我们知道，我们在一个组件当中使用全局数据的时候，分为以下几个步骤
（1）引入 store 文件。
（2）调用 store.getState() API 赋值给 组件的 state ，再使用。
那我们想想，当我们有很多组件的时候，是不是需要每个组件都这样走一遍呢。
- 关于数据不可变。
（1）在 reducer 处理不同的 type 的时候，我们需要深拷贝一份 state 去改变之后再返回。
那么我们深拷贝的时候有什么优化方案呢，是不是必须使用递归写个深拷贝函数呢，可以从数据结构方面思考🤔。
关于上面两点其实是我的 mentor 给我的代码提出的一些问题。
二、关于react-redux
什么是 react-redux ?
这里的 react-redux 是 redux 作者方便 redux 的使用封装了一个 React 的专用库 react-redux , 这里引用 阮一峰大神对于 react-redux 的一些见解 React-Redux 的用法。
既然是方便 redux 的使用，那么就来说说方便的地方，解决了什么问题。
我们如果在 react 项目中单单只使用 redux 的时候，我们会会出现 上述说的第一个问题，而 react-redux 它会将我们的所有组件包裹在其中，然后组件传值，传入引入的 store ，来实现将 store 的全局数据当做参数传给所有组件，那么所有组件的 props 就会有带有全局数据，以此来实现全局数据共享，说白了就是 react-redux 提供一个父组件，他有自己的状态 state，也就是 store。而另外的这些react中的所有组件，它们都是他的儿子，儿子们只负责渲染就对了，需要处理state的交给为父，处理好了state（store）再传给你，你直接在 props 里面取就是了。这样就解决了第一个问题。
上述一段话是我自己的话语，关于一些专业术语，还得看看阮一峰大神的文章，里面有更清楚的一些关于 react-redux 的解释
下面来用代码实现一些。
1、关于Provider
这个 Provider 就是我们上面说的父组件
import React from 'react'
import ReactDOM from 'react-dom'
import store from './store'
import { Provider } from 'react-redux'
import './index.css'
import TodoApp from './TodoApp'
// 引入 react-redux 中的 Provider ，传入全局数据 store，注意这里 Provider 包裹在最外层。
ReactDOM.render(
<Provider store={store}>
<TodoApp />
</Provider>,
document.getElementById('root')
)
2、关于connent()
react-redux 提供 connect 方法,用于将该子组件和 Provider 组件链接起来。
import { connect } from 'react-redux'
class TodoApp extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<p>TodoApp</p>
);
}
}
export default connect()(TodoApp)
如果像上面这样链接，是不可以的。注意这里的 connect 还接受两个参数
1）第一个参数mapStateToProps
这个 mapStateToProps 函数返回一个从外部（state）到内部 props 的映射对象，我们下面这里直接映射state中全部数据
import { connect } from 'react-redux'
const mapStateToProps = (state) => {
return state
}
export default connect(mapStateToProps, null)(TodoApp)
这样我们子组件的 props 中就可以使用全局数据了。
2）第二个参数mapDispatchToProps
那我们这个 mapDispatchToProps 是干什么用的呢。这里的mapDispatchToProps 其实就是建立 store.dispatch 方法的映射, 毕竟我们可以在子组件中发起 全局数据 改变请求啊。它可以是一个函数，也可以是一个对象。
如果 mapDispatchToProps 是一个函数的时候。会有 dispatch 和 ownProps （容器组件的props对象）两个参数。
const mapDispatchToProps = (dispatch, ownProps) => {
return {
handleInputValue(){
dispatch({
type: 'SET_VALUE',
value: ownProps.value
});
}
};
}
如果mapDispatchToProps是一个对象，键值应该是一个函数，会被当作一个 action creator ，返回的 action 会由 redux 自动发出，上面的mapDispatchToProps写成对象就是下面这样。
const mapDispatchToProps = {
handleInputValue: (e) => ({
type: 'SET_VALUE',
value: e.target.value
})
}
三、关于 immer
immer 的介绍
Immer（德语：始终）是一个很小的程序包，基于ES6 的 proxy 实现。它使您可以更方便地处理不可变状态。它以最小的成本来实现 “复制” JavaScript 中的引用型数据类型，因为使用深度拷贝的方法成本高，影响性能。
放一张图感受一下它的魅力
图中我们可以看到，他并不是一昧的递归然后拷贝，而是先找到不同的节点拷贝，相同的节点则是引用原来的数据节点。
后面会出一篇关于 immer 的简单实现。下面先讲讲它的使用方法。
1、通过 npm 安装
npm install immer --save
2、使用
// 引入
import produce from "immer"
// 这里使我们的原始数据
const baseState = [
{
todo: "Learn typescript",
done: true
},
{
todo: "Try immer",
done: false
}
]
// 使用produce 函数操作我们的 baseState
const nextState = produce(baseState, draftState => {
draftState.push({todo: "Tweet about it"})
draftState[1].done = true
})
用法还是比较简单的, 那我们在 reducer 中就可以使用 immer 来做数据的备份了，而舍弃深拷贝函数的原始方法。
这样我们也就解决了我们上面遇到的两个问题。
