Redux和React-Redux的實現（二）：Provider組件和connect的實現

来源:https://www.cnblogs.com/isLiu/archive/2017/12/27/8119861.html
-Advertisement-
Play Games

接著上一篇講，上一篇我們實現了自己的Redux和介紹了React的context以及Provider的原理。 1. Provider組件的實現 lxx_____ Provider組件主要有以下下兩個作用 1. 在整個應用上包一層，使整個應用成為Provider的子組件 2. 接收Redux的stor ...


接著上一篇講，上一篇我們實現了自己的Redux和介紹了React的context以及Provider的原理。

1. Provider組件的實現

Provider組件主要有以下下兩個作用

  1. 在整個應用上包一層，使整個應用成為Provider的子組件
  2. 接收Redux的store作為props，通過context對象傳遞給子組件，所有的子組件都可以取得store

首先我們要知道，Provider組件的任務是將stroe傳遞給子組件，它只是一個傳遞數據的組件，只需要將子組件展示出來就好。

import React from 'react'
import PropTypes from 'prop-types'

export class Provider extends React.Component{
    static childContextTypes = {
        store: PropTypes.object
    }
    getChildContext(){
        return {store:this.store}
    }
    constructor(props, context){
        super(props, context)
        this.store = props.store
    }
    render(){
        return this.props.children
    }
}

2. connect方法

connect的作用就是將React和Redux中的store連接起來

首先要明確它的任務：

  1. 接收一個組件，將Redux中的store通過props傳遞給組件
  2. 將Redux中的action也通過props傳遞給組件
  3. 返回一個新的組件，這個組件可以通過this.props訪問到store中的屬性，也可能是觸發action
  4. 當store中的數據發生變化的時候，通知新的組件

根據它的任務就能知道，它是一個高階函數

connect方法定義

官方給出connect的定義：

connect([mapStateToProps],  [mapDispatchToProps],  [mergeProps],  [options])

非常好理解了，在React-Redux中，我們常用的就是前兩個參數。

mapStateToProps

這個函數幫助我們將store中的數據作為props傳遞給組件，也就是實現了connect方法的第一個任務

mapStateToProps(state, ownProps) : stateProps
  1. mapStateToProps的第一個參數就是Redux的store
  2. 第二個參數就是自己的props，也可已將自己的props和store merge到一起傳遞給組件

我們經常這麼使用mapStateToProps

state=>({ num: state})

或者這樣只獲取我們當前需要的屬性

const mapStateToProps = (state) => {
  return {
    num: state.num
  }
}

mapDispatchToProps

這個函數的會將action以props的形式傳遞給組件，組件可用this.props觸發相應action，也就是完成了上面的第二個任務。

mapDispatchToProps(dispatch, ownProps): dispatchProps

這個函數返回的是裝有action的對象，通常我們直接給它賦值成一個對象，再把我們的action放進去。

import { add, remove, addAsync } from './index.redux'
mapDispatchToProps = { add, remove, addAsync  }

從這裡看好像是完成了我們的任務，但是註意：在我們的組件可以通過this.props觸發相應的action，但是還沒有dispatch，所以只返回了一個type，所以上面的代碼並不是正確的，只是便於大家理解。

我們還需要dispatch一下action，下麵才是正確的代碼：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    add: (...args) => dispatch(actions.add(...args)),
    remove: (...args) => dispatch(actions.remove(...args)),
    addAsync: (...args) => dispatch(actions.addAsync(...args))
  }
}

有人會問，我用React-Redux的connect時，這個參數直接穿的是action對象呀，怎麼回事？

這是因為在connect內部使用了Redux提供的bindActionCreators方法，在connect內部將所有的action都dispatch了。我們實現的時候，也需要實現這個bindActionCreators方法。

mergeProps

mergeProps顧名思義，就是將stateProps、dispatchProps、ownProps合併起來。

如果不指定mergeProps，預設用Object.assign

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, {
    num: stateProps.num,
    add: () => dispatchProps.add(),
    remove: () => dispatchProps.remove(),
    addAsync: () => dispatchProps.addAsync(),
  })
}

options

規定connector的行為，通常我們使用預設值。

connect方法的使用

我們常見的寫法，也就是ES7的decorator裝飾器，也就是裝飾者模式，這種寫法比較簡便：

@connect(
  state=>({ num: state}),
  { add, remove, addAsync }
)
class App extends React.Component{
  render(){
    return (
      <div>
        <h2>現在有物品{this.props.num}件</h2>
        <button onClick={this.props.add}>add</button>
        <button onClick={this.props.remove}>remove</button>
        <button onClick={this.props.addAsync}>addAsync</button>
      </div>
    )
  }
}
export default App;

或者是更容易理解的高階函數的寫法：

class App extends React.Component{
  render(){
    return (
      <div>
        <h2>現在有物品{this.props.num}件</h2>
        <button onClick={this.props.add}>add</button>
        <button onClick={this.props.remove}>remove</button>
        <button onClick={this.props.addAsync}>addAsync</button>
      </div>
    )
  }
}
App = connect(
    state => ({num: state),
    { add, remove, addAsync }
)(App)

第二中寫法我們可以更好的理解connect函數如何工作：connect接受了它的四個參數，然後返回了一個高階組件，高階組件需要接收一個組件作為參數，在高階組件中通過處理被傳入的組件，其中用到了connect的四個參數，最後將處理後的組件返回出去。

3. mapStateToProps的實現

connect方法返回了一個函數，函數里返回了一個組件，有兩次返回，這裡我們用兩層箭頭函數：

export const connect = (mapStateToProps = (state) => state, mapDispatchToProps={}) => (WrapComponent) => {
  return class ConnectComponent extends React.Component{

  }
}

它等價於這種寫法：

export function connect (mapStateToProps = (state) => state, mapDispatchToProps={}) {
  return function (WrapComponent) {
    return class ConnectComponent extends React.Component{

    }
  }
}

雙層箭頭函數更加簡潔，也算是編寫高階函數的一個技巧吧。

mapStateToProps的任務已經明確，先接收一個，獲取Redux中的store，將stroe通過props傳遞給組件，代碼如下：

import React from 'react'
import PropTypes from 'prop-types'

export const connect = (mapStateToProps = (state) => state, mapDispatchToProps={}) => (WrapComponent) => {
  return class ConnectComponent extends React.Component{
    static contextTypes = {
      store: PropTypes.object
    }
    constructor (props, context) {
      super(props, context)
      this.state = {
        props: {}
      }
    }
    componentDidMount () {
      const {store} = this.context
      this.update()
      store.subscribe(()=>this.update())
    }
    update () {
      const { store } = this.context
      const stateProps = mapStateToProps(store.getState())
      this.setState({
        props: {
          ...this.state.props,
          ...stateProps
        }
      })
    }
    render () {
      return <WrapComponent {...this.props}/>
    }
  }
}

很明確，我們先用context獲取了Provider組件傳遞過來的store然後將this.props與store中的屬性merge成一個新的this.props傳遞給組件，組件mount的時候用store.subscribe監聽了store內數據的變化，從而實時通知組件，完成了connect的第四個任務。

4. mapDispatchToProps的實現

介紹mapDispatchToProps的是有也說了，傳遞進來的action不能直接使用，需要dispatch一下，Redux提供了一個bindActionCreators方法，同樣我們也在自己的Reudx中實現這個方法。

接著上面的代碼來寫

import React from 'react'
import PropTypes from 'prop-types'
import {bindActionCreators} from './myRedux'

export const connect = (mapStateToProps=state=>state,mapDispatchToProps={})=>(WrapComponent)=>{
    return class ConnectComponent extends React.Component{
        static contextTypes = {
            store:PropTypes.object
        }
        constructor(props, context){
            super(props, context)
            this.state = {
                props:{}
            }
        }
        componentDidMount(){
            const {store} = this.context
            store.subscribe(()=>this.update())
            this.update()
        }
        update(){
            const {store} = this.context
            const stateProps = mapStateToProps(store.getState())
            const dispatchProps = bindActionCreators(mapDispatchToProps, store.dispatch)
            this.setState({
                props:{
                    ...this.state.props,
                    ...stateProps,
                    ...dispatchProps    
                }
            })
        }
        render(){
            return <WrapComponent {...this.state.props}></WrapComponent>
        }
    }
}

這個很簡單，主要的就是bindActionCreators方法，寫在我們自己的Redux中

function bindActionCreator(creator, dispatch){
    return (...args) => dispatch(creator(...args))
}
export function bindActionCreators(creators, dispatch){
    return Object.keys(creators).reduce((ret,item)=>{
        ret[item] = bindActionCreator(creators[item],dispatch)
        return ret
    },{})
}

也不是很難理解，遍歷對象中的所有action，每個action都dispatch一下，返回每一個dispatch之後的action。

比如之前的add方法為：add(args)，現在的add方法是：store.dispatch(add(args))

現在我們的Provider組件和connect高階函數已經實現，下一篇我們實現Redux的中間件。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android 環境搭建
    一、Android studio 軟體的下載 往期中國（官網）下載地址：http://www.android-studio.org/下載要使用的Android studio，根據自己的電腦32/64位下載相應的即可。 如圖：（在這裡我下載的是Android應用所需的所有工具） 當然你可以選擇其他平臺 ...
  • Android基礎_一次上傳多張圖片
    獲取許可權 頁面佈局視圖： 效果是：點擊圖片1：拍照上傳，1張或多張。 點擊圖片2：從相冊中選擇照片上傳 Activity核心代碼： 最終效果圖： ...
  • 使用HandyJSON導致的記憶體泄漏問題相關解決方法
    在移動開發中，與伺服器打交道是不可避免的，從伺服器拿到的介面數據最終都會被我們解析成模型，現在比較常見的數據傳輸格式是json格式，對json格式的解析可以使用原生的解析方式，也可以使用第三方的，我們的項目中使用的是阿裡開源的一個swift編寫的解析框架 HandyJSON。 在使用過程中，使用in ...
  • Android二維碼生成
    最新在學習adnroid，遇到二維碼的生成與掃描在此做個整理 貼下二維碼生成的工具類 /** * 二維碼生成工具類 */ public class QRCodeUtil { /** * 生成二維碼 要轉換的地址或字元串,可以是中文 * @param url * @param width * @par ...
  • 貝塞爾浪花登錄背景
    一款超炫的浪花登錄背景，突然感覺自己還是有點設計天賦的^_^ 實現起來很簡單，代碼量比較少，個人喜歡用比較簡單的比較少的代碼去完成自己想要的效果，可能也是懶癌晚期照成的 這裡講下核心功能，因為浪花的貝塞爾效果網上也很多，有的也很炫，不過實現起來很複雜，我這裡是簡單版的 先看下麵的手繪圖，凈化之所在， ...
  • Android基礎_web通信3
    在Android基礎_web通信2中，我運用的JSONObject是Android原生的json類，通過import org.json.JSONObject來導入。 還有另外一種更簡單的方法，就是用Gson解析 一.導入Gson包 複製你需要添加的jar，並將其黏貼到app— —src— —main ...
  • 【讀書筆記】iOS-關閉鍵盤的2種方法
    一種是通過使用鍵盤上的return鍵關閉鍵盤，一種是通過觸摸背景關閉鍵盤。 參考資料：《iOS7開發快速入門》 ...
  • WebRtc（網頁即時通訊技術）知識點總結
    WebRTC，名稱源自網頁實時通信（Web Real-Time Communication）的縮寫，簡而言之它是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術。並且還支持跨平臺：windows，linux，mac，android，iOS。 實現原理 P2P連接模式 一般我們傳統的連接方式，都是以 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類