1. 程式人生 > >react-redux中的connect方法解析

react-redux中的connect方法解析

connect()react-redux中的核心方法之一,它將react元件預redux中的Store真正連線在一起

http://www.jianshu.com/p/6bf7ffbcff3b

元件

React-Redux將所有元件分為兩大類:展示元件(UI元件),容器元件

展示元件有以下幾個特徵:

只負責 UI 的呈現,不帶有任何業務邏輯
沒有狀態(即不使用this.state這個變數)
所有資料都由引數(this.props)提供
不使用任何 Redux 的 API

容器元件有以下幾個特徵:

負責管理資料和業務邏輯,不負責 UI 的呈現
帶有內部狀態
使用 Redux 的 API

總結為一點: 展示元件負責 UI 的呈現,容器元件負責管理資料和邏輯

connect方法解析

下圖是connect()的概念圖


react-redux connect - connect是什麼.jpg


可以簡單歸納為以下幾點:

  • mapStateToProps必須是function,作為輸入邏輯,
  • mapDispatchToProps可以是funciton,也可以是物件,作為輸出,

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

引數

[mapStateToProps(state, [ownProps]): stateProps] (Function)

:

  • mapStateToProps必須是一個Function,作用是繫結state的指定值到props
  • state: 監聽Redux store的變化。任何時候只要 Redux store發生改變,mapStateToProps函式就會被呼叫,該回調函式必須返回一個純物件,該物件會與相應展示元件的 props 合併。
  • ownProps: 該引數的值為傳遞到元件的 props,而且只要元件接收到新的propsmapStateToProps 也會被呼叫

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)

  • mapDispatchToProps可以是一個Function,也可以是Object,作用是繫結action建立函式到props
  • dispatch:
    • 如果傳遞的是一個物件,那麼每個定義在該物件的函式都將被當作Redux action creator,而且這個物件會與 Redux store繫結在一起,其中所定義的方法名將作為屬性名,合併到元件的 props 中;
    • 如果傳遞的是一個函式,該函式將接收一個 dispatch 函式,然後由你來決定如何返回一個物件,這個物件通過 dispatch 函式與 action creator 以某種方式繫結在一起

關於connect()簽名的詳細解釋可以看API文件

connect()例項

以計數器為例

component/count.js

import React, { Component } from 'react'

class Counter extends Component {

    increment(){
     this.props.onAdd();
    }

    decrement(){
       this.props.onCut();
    }

    render() {
        return (
            <p>
                Clicked: {this.props.counter} times
                {' '}
                <button onClick={this.increment.bind(this)}>+</button>
                {' '}
                <button onClick={this.decrement.bind(this)}>-</button>
            </p>
        )
    }
}

export default Counter;

containers/count.js

import {connect} from 'react-redux'
import Counter from '../component/count'


//將state繫結到props的counter
const mapStateToProps = (state)=> {
    console.log(state);
    return {
        counter: state
    }
};
//將action的所有方法繫結到props上
const mapDispatchToProps = (dispatch) => {
    return {
        onAdd: ()=> {
            dispatch({type: "INCREMENT_COUNTER"});
        },
        onCut: ()=> {
            dispatch({type: "DECREMENT_COUNTER"});
        }
    };
};

//通過react-redux提供的connect方法將我們需要的state中的資料和actions中的方法繫結到props上

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

reducers/count.js

import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/count'

//reducer其實也是個方法而已,引數是state和action,返回值是新的state
export default function counter(state = 0, action) {
    switch (action.type) {
        case INCREMENT_COUNTER:
            return state + 1;
        case DECREMENT_COUNTER:
            return state - 1;
        default:
            return state
    }
}

相關推薦

react-reduxconnect 方法詳解

Redux 是「React 全家桶」中極為重要的一員,它試圖為 React 應用提供「可預測化的狀態管理」機制。Redux 本身足夠簡單,除了 React,它還能夠支援其他介面框架。所以如果要將 Redux 和 React 結合起來使用,就還需要一些額外的工具,其中最重要的莫過於 react-redux 了。

深入淺出之React-reduxconnect的裝飾器用法@connect

這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。 通常我們需要一個reducer和一個action,然後使用connect來包裹你的Component。假設

react-reduxconnect使用裝飾器的方式寫

1.安裝外掛babel-plugin-transform-decorators-legacy 2.npm run eject 彈出react外掛 3.package.json中babel上加入"plugins": ["transform-decorators-legacy"]

react-reduxconnect方法解析

connect()是react-redux中的核心方法之一,它將react元件預redux中的Store真正連線在一起 http://www.jianshu.com/p/6bf7ffbcff3b 元件 React-Redux將所有元件分為兩大類:展示元件(UI元件),容器元件 展示元件有以下幾個特徵:

關於react-reduxconnect用法介紹及原理解析

關於react-redux的一個流程圖 流程圖 connect用法介紹 connect方法宣告: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用:連線Reac

react/redux使用Immutable

可控 有一個 size creat gpo 容易 最好 shc get 有人說 Immutable 可以給 React 應用帶來數十倍的提升,也有人說 Immutable 的引入是近期 JavaScript 中偉大的發明,因為同期 React 太火,它的光芒被掩蓋了。這些至

java Integer方法解析(位操作)

方法 描述 static int bitCount(int i) 返回i的二進位制中1的個數. static int compare(int x, int y)

react-reduxconnect()

  Store與檢視層的繫結 Provider元件 想要把store繫結在檢視層上,得用到React-redux中的兩個主角:Provider和Connect,在api文件第一段話,作者說通常情況下你無法使用connect()去connect一個沒有繼承Provider的元件,

react-redux state改變,頁面未重新渲染

1.問題? 在redux中,通過reducer來對state的進行更新,但是我在reducer中改變了state的值,但是頁面沒有重新渲染,並且在控制檯輸出顯示state的值已經改變 程式碼: const initStore = [ {

JS isNaN() 方法解析

1. isNaN() 存在的意義 由於 NaN 是唯一一個不等於自身的值,不像其他的值,可以用相等操作符來判斷是否等於自身,NaN == NaN和NaN === NaN都會返回false,所以isNaN()就誕生了,那它到底起著怎樣的作用呢,且看下文。 2. isNaN() 判斷的原理 isNaN函式接受一個

reactredux的幾種常用的方法

1. createStore(reducer, [initState, enhancer])------redux中的方法 作用:建立一個Redux store來存放應用中所有的state,一個應用只能有個store。函式返回store物件。引數: reducer(Fun

react-redux高階元件connect方法使用介紹以及實現原理

redux 講connect之前先來回顧一下redux的基本用法, 見下面的例子: import { createStore } from 'redux'; function counter(state = 0, action) { switch

react-redux的使用採用@connect修飾器方法(簡單demo)

如果你採用 react-create-app腳手架話,按以下流程操作 1. npm install eject  彈出配置檔案 2. npm install babel-plugin-transform-decorators-regacy --save-dev 3. 在

JavaScriptreplace()方法的第二個參數解析

lac code $2 search 第一個 轉義 情況 第一次 參數解析 語法 string.replace(searchvalue,newvalue) 參數值 searchvalue 必須。規定子字符串或要替換的模式的 RegExp 對象。請註意,如果該值是一個

JavaScript使用eval()方法解析json串

括號 javascrip pass 後臺 {} ava eval() 一個 java 最近在js用到了eval()方法,在這裏做個筆記 當時是這麽用的:data = eval("("+data+")"); data為後臺向前臺傳送的一個json串,所以這裏需要使用eva

react:在一個組件調用別的組件方法

state maps export prot etop ret get 回調函數 proto 先介紹一下要解決的問題:react中一個組件A和一個組件B,其中B是被connect(connect是redux中的方法)包裝過的組件,包裝成BContainer,A和BConta

Java Thread的sleep、join方法解析

開始 system sleep main gen 解析 等待時間 calling trace 1.Thread中sleep方法作用是使當前線程等待,其他線程開始執行,如果有線程鎖,sleep不會讓出鎖 沒有加鎖代碼如下: public class Synchronized

react-redux connect原始碼解讀

今天看了下react-redux的原始碼,主要來看下connect的方法 首先找到connect的入口檔案。在src/index.js下找到。對應connect資料夾下的connect.js檔案。 大致說下原始碼connect流程 connect.js對外暴露是通過ex

React-Redux 原始碼解析 一(createStore)

createStore 一般而言,我檢視一個庫的原始碼,首先回檢視對應方法的引數,其次是對應的return ,然後再看程式碼的具體實現。 通過檢視原始碼,發現createStore 方法返回了一個物件, 該物件共暴露出了五個方法,四個常用的方法: return {

優雅的在React專案使用Redux

首先我們會用到哪些框架和工具呢? React UI框架 Redux 狀態管理工具,與React沒有任何關係,其他UI框架也可以使用Redux react-redux React外掛,作用:方便在React專案中使用Redux react