阅读 150

redux的最佳实践(二)

前言

学习完了redux,仅仅处于一个会使用的层次,这还远远不够,要找出它的最佳使用方法。

一、redux最佳实践

当我们最初学会使用redux的时候,我们基本都会遇到一些问题,这里主要来说说这两个问题。

  1. 我们知道,我们在一个组件当中使用全局数据的时候,分为以下几个步骤

(1)引入 store 文件。

(2)调用 store.getState() API 赋值给 组件的 state ,再使用。

那我们想想,当我们有很多组件的时候,是不是需要每个组件都这样走一遍呢。

  1. 关于数据不可变。

(1)在 reducer 处理不同的 type 的时候,我们需要深拷贝一份 state 去改变之后再返回。

那么我们深拷贝的时候有什么优化方案呢,是不是必须使用递归写个深拷贝函数呢,可以从数据结构方面思考🤔。

关于上面两点其实是我的 mentor 给我的代码提出的一些问题。

二、关于react-redux

什么是 react-redux ?

这里的 react-reduxredux 作者方便 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 是一个函数的时候。会有 dispatchownProps (容器组件的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 来做数据的备份了,而舍弃深拷贝函数的原始方法。

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

文章分类
前端
文章标签