使用 hooks 和 connect 訪問同一個 store

asce1885 發布于2019-08-26 13:56 / 1353人閱讀

摘要：距離正式發布已經過去好幾個月了，，，也都支持了的用法，那么有沒有可能用來實現一個同時支持和訪問的呢答案是肯定的。那么我們在組件內應該如何使用呢至此，我們就實現了基于原生的跨組件通信，和的訪問都通過實現，默認支持了淺比較。

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 實現，默認支持了淺比較。

云服務器 GPU云服務器 shop和store區別 php如何訪問一個類另一個程序正在使用 linux 訪問另一個硬盤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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