react和redux竖立通讯的体式格局

有2种计划：

• 老计划connect
• 新计划hook

老计划connect

曾，我们会运用connect竖立react和redux的通讯，比方，在一个class写法的组件中：

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import globalAction from 'actions/global'
@connect(
    // 获得reducer中的state
    state => ({global: state.global}), 
    // 获得action
    dispatch => bindActionCreators({ globalAction }, dispatch)
)
class Component extends React.Component {
    componentDidMount() {
        // 从props中读取reducer和action
        const {global, globalAction} = this.props
        globalAction()
        console.log(global)
    }
    render() {
        return <div />
    }
}

关于用习惯了class组件的开发者来讲，这类写法烂熟于心了。然则，不论你多喜好这类形式，照样得进修react hook。

新计划hook

跟着react16.8的宣布，hook功用正式投入运用。
将react的class组件转换成函数式组件，想必你已看过官网的demo了，假如没看，转头看一下也不晚。那末，假如我们运用了hook，又该怎样跟redux通讯呢？
针关于这个题目，业界有人供应了一个庖代react-redux的新插件redux-react-hook。
redux-react-hook运用了react供应的Context（上下文）功用，给顶层组件Provide传入了store对象，绑定到上下文。
运用了redux-react-hook以后，上面的demo就变成了下面这类写法：

import React, { useEffect } from 'react'
import { useDispatch, useMappedState, StoreContext } from 'redux-react-hook'
import globalAction from 'actions/global'
function Component {
    // 猎取上下文的store对象
    const store = useContext(StoreContext)
    // 从store中读取reducer
    const {global} = store
    // 从store中读取dispatch
    const dispatch = useDispatch()
        
    useEffect(() => {
        dispatch(globalAction())
        console.log(global)
    }, [global, dispatch, globalAction])
    
    render() {
        return <div />
    }
}

修改后的demo运用到了redux-react-hook供应的个中2个API，StoreContext和useDispatch，其次，还能够运用useMappedState来猎取reducer中的状况。

const mapState = useCallback(
    state => ({
        global: state.global
    }),
    [],
);
const { global } = useMappedState(mapState);

redux-react-hook

简朴引见写3个API，StoreContext,useDispatch,useMappedState。

StoreContext

React供应的createContext建立上下文，返回该对象。

import { createContext } from 'react';
// 建立context
const StoreContext = createContext<TStore | null>(null)
return StoreContext

useDispatch

读取StoreContext，返回dispatch。

function useDispatch(): Dispatch<TAction> {
    // 从上下文读取store
    const store = useContext(StoreContext);
    if (!store) {
      // store不存在，抛出非常
      throw new MissingProviderError();
    }
    return store.dispatch;
  }
return useDispatch

useMappedState

useMappedState跟其他2个API不太一样，它是一个自定义的hook，用来定阅reducer里的状况。

总结

hook式的写法究竟是好是坏，临时没法区分，就像有人以为函数式编程很好，但有人以为函数式编程使得代码难于保护。
能够预感的是，当你运用了hook，会在项目中逐步把class祛除，最后跟class语法糖离别，回归函数的天下。