欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react与redux通信之hook-前端江湖-SegmentFault思否

程序员文章站 2023-11-09 23:31:52
react和redux建立通信的方式 有2种方案: 老方案connect 新方案hook 老方案connect 曾经,我们会使用connect建立react和redux的通信,...

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 <p />
    }
}

对于用习惯了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 <p />
    }
}

修改后的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语法糖告别,回归函数的世界。