使用 hooks 和 connect 访问同一个 store

asce1885 发布于2019-08-26 13:56 / 1207人阅读

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

React Hooks 距离正式发布已经过去好几个月了，redux，mobx，也都支持了 Hooks 的用法，那么有没有可能用 React Context API & Hooks 来实现一个同时支持 class component 和 functional component 访问的 store 呢？答案是肯定的。

既然我们是基于 Context Api，那么先来创建一个 context 对象

// store.js
import React from "react"

const initialStore = {}
const StoreContext = React.createContext(initialStore)

接着我们来构造两种访问 store 的方法：

Hooks 的方式：

// store.js
import {useReducer, useContext} from "react"

// 声明 reducer
export const reducer = (state, action) => {
  switch (action.type) {
    case "set":
      return { ...state, ...action.payload }
    case "reset":
      return {}
    default:
      throw new Error(
        `action: "${action.type}" not defined`
      )
  }
}

// 基于原生 Hooks 实现
export const useStore = () => {
  return useReducer(reducer, useContext(StoreContext))
}

HOC 的方式：
HOC 需要有一个上下文环境才可以访问 store，所以我们先来构造 provider

// 构造一个根组件 Provider
export const StoreProvider = ({ children }) => {
  const [context, dispatch] = useStore()
  return {children}
}

这个 StoreProvider 可以像 react-redux 的 Provider 一样，包裹在根组件的最外层

然后来看 consumer

export const connect = (WrappedComponent) => {
  return class ConnectClass extends React.Component {
    render () {
      return (
        
          {
            state => 
          }
        
      )
    }
  }
}

我们封装了一个 connect 函数，作为 HOC，用法和 react-redux的 connect 的单参形式形似。

那么我们在组件内应该如何使用呢? Class Component

import React from "react"
import { connect } from "store"

export default @connect class Component extends React.Component {
  handleClick = () => {
    this.props.dispatch({type: "set", payload: {a: 1}})
  }

  render() {
    return (
      {JSON.stringify(this.props)}
      {JSON.stringify(this.props)}
    )
  }
}

Functional Component

import React from "react"
import { useStore } from "store"

export default const Component = () => {
  const [store, dispatch] = useStore()
  const handleClick = () => {
    dispatch({type: "set", payload: {a: 1}})
  }

  return (
      {JSON.stringify(store)}
      {JSON.stringify(store)}
    )
}

至此，我们就实现了基于 react 原生 api 的跨组件通信，hooks 和 hoc 的访问都通过 context api 实现，默认支持了浅比较。

云服务器私有云 shop和store区别 php如何访问一个类另一个程序正在使用 linux 访问另一个硬盘

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

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

react与redux通信之hook

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

lemon 2019-08-23 17:08 评论0 收藏0
Hooks + Context：状态管理的新选择

摘要：用户点击改变全局状态崔然渲染整颗组件树有没有解决方案呢当然有创建一个只接收的新组件，并将组件中的逻辑都移到组件中。最终的示例使用全局状态和生成全局状态和崔然完整示例见结论在和出现之前，缺乏自带的全局状态管理能力。 React 16.3 版本，正式推了出官方推荐的 context API —— 一种跨层级的数据传递方法。React 16.8 版本，推出了全新的 hooks 功能，将原本只...

tommego 2019-08-23 18:31 评论0 收藏0
可能是基于 Hooks 和 Typescript 最好的状态管理工具

摘要：接上一篇我理想中的状态管理工具之前说，对于我个人来而言，理想的状态管理工具只需同时满足两个特点简单易用，并且适合中大型项目完美地支持未能找到一个完美满足这两点的，所以我决定自己造了一个叫。把分为和两类是很好的实践。接上一篇：我理想中的状态管理工具之前说，对于我个人来而言，理想的状态管理工具只需同时满足两个特点：简单易用，并且适合中大型项目完美地支持 Typescript 未...

derek_334892 2019-08-23 13:10 评论0 收藏0
精读《怎么用 React Hooks 造轮子》

摘要：可以看到，这样不仅没有占用组件自己的，也不需要手写回调函数进行处理，这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时，因此直接把回调函数抛出来即可。 1 引言上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是...

Shihira 2019-08-26 13:22 评论0 收藏0
精读《Function Component 入门》

摘要：比如就是一种，它可以用来管理状态返回的结果是数组，数组的第一项是值，第二项是赋值函数，函数的第一个参数就是默认值，也支持回调函数。而之所以输出还是正确的，原因是的回调函数中，值永远指向最新的值，因此没有逻辑漏洞。 1. 引言如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Com...

Scholer 2019-08-26 13:56 评论0 收藏0