redux的最佳实践（二）

前言

学习完了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 来做数据的备份了，而舍弃深拷贝函数的原始方法。

这样我们也就解决了我们上面遇到的两个问题。