react与redux通信之hook

栏目: 服务器 · 发布时间: 5年前

内容简介:有2种方案:曾经,我们会使用connect建立react和redux的通信,例如,在一个class写法的组件中:对于用习惯了class组件的开发者来说,这种写法烂熟于心了。但是,不管你多喜欢这种模式,还是得学习react hook。

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML 5 与 CSS 3 权威指南

HTML 5 与 CSS 3 权威指南

陆凌牛 / 机械工业出版社华章公司 / 2011-4-7 / 69.00

如果你是一位有前瞻性的web前端工作者,那么你一定会从本书中受益,因为它就是专门为你打造的。 《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了html 5和css 3的所有新功能和新特性;技术新颖,所有知识点都紧跟html 5与css 3的最新发展动态(html 5和css 3仍在不断完善之中);实战性强(包含246个示例页面),不仅每个知识点都配有精心设计的小案例(便于动手......一起来看看 《HTML 5 与 CSS 3 权威指南》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器