react与redux通信之hook

lemon 发布于2019-08-23 17:08 / 2966人阅读

摘要：新方案随着的发布，功能正式投入使用。那么，如果我们使用了，又该如何跟通信呢针对于这个问题，业界有人提供了一个取代的新插件。提供的创建上下文，返回该对象。可以预见的是，当你使用了，会在项目中逐渐把消灭，最后跟语法糖告别，回归函数的世界。

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

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

修改后的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(null)
return StoreContext

useDispatch

读取StoreContext，返回dispatch。

function useDispatch(): Dispatch {
    // 从上下文读取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语法糖告别，回归函数的世界。

私有云服务器托管 React hooks react-redux react-hooks React_Redux_Appointm

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103869.html

React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
React组件设计实践总结05 - 状态管理

摘要：要求通过要求数据变更函数使用装饰或放在函数中，目的就是让状态的变更根据可预测性单向数据流。同一份数据需要响应到多个视图，且被多个视图进行变更需要维护全局状态，并在他们变动时响应到视图数据流变得复杂，组件本身已经无法驾驭。今天是 520，这是本系列最后一篇文章，主要涵盖 React 状态管理的相关方案。前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 评论0 收藏0
使用 hooks 和 connect 访问同一个 store

摘要：距离正式发布已经过去好几个月了，，，也都支持了的用法，那么有没有可能用来实现一个同时支持和访问的呢答案是肯定的。那么我们在组件内应该如何使用呢至此，我们就实现了基于原生的跨组件通信，和的访问都通过实现，默认支持了浅比较。 React Hooks 距离正式发布已经过去好几个月了，redux，mobx，也都支持了 Hooks 的用法，那么有没有可能用 React Context API &...

asce1885 2019-08-26 13:56 评论0 收藏0
React Hook起飞指南

摘要：起飞指南作者元潇方凳雅集出品目前放出来了个内置，但仅仅基于以下两个，就能做很多事情。行代码实现一个全局元潇根组件挂上即可子组件调用随时随地实现一个局部元潇的本质是的一个语法糖，感兴趣可以阅读一下的类型定义和实现。 React Hook起飞指南作者：元潇方凳雅集出品 16.8目前放出来了10个内置hook，但仅仅基于以下两个API，就能做很多事情。所以这篇文章不会讲很多API，...

姘搁『 2019-08-26 10:47 评论0 收藏0
React Hooks 越来越火了，它会取代传统的 Redux 吗？

摘要：前言自推出之后，收到了不少追捧，很多问题也随之而来。在出现之前，可以使用保存状态和更新状态用以应对这种情况。为了在这个用例上追赶的脚步，的需要提供副作用隔离功能。提供了一个，可以用它接入你的风格的。 showImg(https://segmentfault.com/img/remote/1460000019913697?w=1280&h=853); 前言 React Hooks 自推出...

Scliang 2019-08-26 10:26 评论0 收藏0