react與redux通信之hook

lemon 發布于2019-08-23 17:08 / 3092人閱讀

摘要：新方案隨著的發布，功能正式投入使用。那么，如果我們使用了，又該如何跟通信呢針對于這個問題，業界有人提供了一個取代的新插件。提供的創建上下文，返回該對象。可以預見的是，當你使用了，會在項目中逐漸把消滅，最后跟語法糖告別，回歸函數的世界。

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語法糖告別，回歸函數的世界。

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

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