内容简介:有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语法糖告别,回归函数的世界。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 网络通信2:TCP简单通信
- 网络通信3:TCP交互通信
- 如何在ASP.NET Core中使用SignalR构建与Angular通信的实时通信应用程序
- Electron 使用串口通信
- 进程间通信---共享内存
- 微服务通信策略
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Pro JavaScript Design Patterns
Dustin Diaz、Ross Harmes / Apress / 2007-12-16 / USD 44.99
As a web developer, you’ll already know that JavaScript™ is a powerful language, allowing you to add an impressive array of dynamic functionality to otherwise static web sites. But there is more power......一起来看看 《Pro JavaScript Design Patterns》 这本书的介绍吧!