成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react與redux通信之hook

lemon / 3100人閱讀

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

react和redux建立通信的方式

有2種方案：

老方案connect

新方案hook

老方案connect

曾經(jīng)，我們會使用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 

    }
}

對于用習(xí)慣了class組件的開發(fā)者來說，這種寫法爛熟于心了。但是，不管你多喜歡這種模式，還是得學(xué)習(xí)react hook。

新方案hook

隨著react16.8的發(fā)布，hook功能正式投入使用。
將react的class組件轉(zhuǎn)換成函數(shù)式組件，想必你已經(jīng)看過官網(wǎng)的demo了，如果沒看，回頭看一下也不晚。那么，如果我們使用了hook，又該如何跟redux通信呢？
針對于這個問題，業(yè)界有人提供了一個取代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中的狀態(tài)。

const mapState = useCallback(
    state => ({
        global: state.global
    }),
    [],
);
const { global } = useMappedState(mapState);
redux-react-hook

簡單介紹寫3個API，StoreContext,useDispatch,useMappedState。

StoreContext

React提供的createContext創(chuàng)建上下文，返回該對象。

import { createContext } from "react";
// 創(chuàng)建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里的狀態(tài)。

總結(jié)

hook式的寫法究竟是好是壞，暫且無法分辨，就像有人覺得函數(shù)式編程很好，但有人覺得函數(shù)式編程使得代碼難于維護(hù)。
可以預(yù)見的是，當(dāng)你使用了hook，會在項(xiàng)目中逐漸把class消滅，最后跟class語法糖告別，回歸函數(shù)的世界。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103869.html

相關(guān)文章

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅(jiān)持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點(diǎn)，受到很多朋友的關(guān)注，都強(qiáng)烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

  • React組件設(shè)計(jì)實(shí)踐總結(jié)05 - 狀態(tài)管理

    摘要：要求通過要求數(shù)據(jù)變更函數(shù)使用裝飾或放在函數(shù)中，目的就是讓狀態(tài)的變更根據(jù)可預(yù)測性單向數(shù)據(jù)流。同一份數(shù)據(jù)需要響應(yīng)到多個視圖，且被多個視圖進(jìn)行變更需要維護(hù)全局狀態(tài)，并在他們變動時響應(yīng)到視圖數(shù)據(jù)流變得復(fù)雜，組件本身已經(jīng)無法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態(tài)管理的相關(guān)方案。 前幾篇文章在掘金首發(fā)基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長了？掘金值太低了？ ...

    ideaa 評論0 收藏0

  • 使用 hooks 和 connect 訪問同一個 store

    摘要：距離正式發(fā)布已經(jīng)過去好幾個月了，，，也都支持了的用法，那么有沒有可能用來實(shí)現(xiàn)一個同時支持和訪問的呢答案是肯定的。那么我們在組件內(nèi)應(yīng)該如何使用呢至此，我們就實(shí)現(xiàn)了基于原生的跨組件通信，和的訪問都通過實(shí)現(xiàn)，默認(rèn)支持了淺比較。 React Hooks 距離正式發(fā)布已經(jīng)過去好幾個月了，redux，mobx，也都支持了 Hooks 的用法，那么有沒有可能用 React Context API &...

    asce1885 評論0 收藏0

  • React Hook起飛指南

    摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個內(nèi)置，但僅僅基于以下兩個，就能做很多事情。行代碼實(shí)現(xiàn)一個全局元瀟根組件掛上即可子組件調(diào)用隨時隨地實(shí)現(xiàn)一個局部元瀟的本質(zhì)是的一個語法糖，感興趣可以閱讀一下的類型定義和實(shí)現(xiàn)。 React Hook起飛指南 作者：元瀟 方凳雅集出品 16.8目前放出來了10個內(nèi)置hook，但僅僅基于以下兩個API，就能做很多事情。所以這篇文章不會講很多API，...

    姘擱『 評論0 收藏0

  • React Hooks 越來越火了，它會取代傳統(tǒng)的 Redux 嗎？

    摘要：前言自推出之后，收到了不少追捧，很多問題也隨之而來。在出現(xiàn)之前，可以使用保存狀態(tài)和更新狀態(tài)用以應(yīng)對這種情況。為了在這個用例上追趕的腳步，的需要提供副作用隔離功能。提供了一個，可以用它接入你的風(fēng)格的。 showImg(https://segmentfault.com/img/remote/1460000019913697?w=1280&h=853); 前言 React Hooks 自推出...

    Scliang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<