React-Redux的用法

leap_frog 發布于2019-08-20 18:19 / 2210人閱讀

摘要：基本流程組件只接受數據包括出來的數據以及方法容器組件通過將返回的作為傳入通過將作為傳入通過方法將這兩個方法與組件連接起來返回一個容器組件組件將所有組件分成兩大類組件和容器組件組件有以下幾個特征只負責的呈現不帶有任何業務邏輯沒有狀態即不

基本流程

1.UI組件Example,只接受this.props數據,包括reducer出來的數據state,
以及dispatch方法.
2.容器組件
const store = createStore(reducer);
通過mapStateToProps將reducer返回的state作為this.props傳入.
通過mapDispatchToProps將action作為this.props傳入.
通過connect方法將這兩個方法與Example組件連接起來,返回一個容器組件.

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";
import reducer from "../reducers/reducer6.js";
import { addAction, delAction } from "../actions/action2.js";
import Example from "../components/Example5.js";

const store = createStore(reducer);

function mapStateToProps(state) {
    return {
        count: state.count
    };
}

function mapDispatchToprops(dispatch) {
    return {
        add: () => dispatch(addAction()),
        del: () => dispatch(delAction())
    };
}

const App = connect(mapStateToProps, mapDispatchToprops)(Example)

render(
    
        
    ,
    document.getElementById("root")
);

import React, { Component } from "react";

class Example extends Component {
    render() {
        const { count, add, del } = this.props;

        return (
            
                count: { count }
                
                
            
        );
    }
}

export default Example;

UI組件

1.React-Redux將所有組件分成兩大類:UI組件和容器組件.
2.UI組件有以下幾個特征:

import React, { Component } from "react";

class Counter extends Component {
    render() {
        const { value, onIncreaseClick } = this.props;

        return (
            
                { value }
                
            
        );
    }
}

export default Counter;

1.只負責UI的呈現,不帶有任何業務邏輯
2.沒有狀態(即不使用this.state這個變量)
3.所有數據都由參數(this.props)提供
4.不適用任何redux的API

因為不含有狀態,UI組件又被稱為"純組件",即它跟純函數一樣,純粹由參數決定它的值.

容器組件

// Action
const increaseAction = {
    type: "increase"
};

// Reducer
function counter(state = { count: 0 }, action) {
    const count = state.count;
    switch (action.type) {
        case "increase":
            return {
                count: count + 1
            }
        default:
            return state;
    }
}

// Store
const store = createStore(counter);

// Map Redux state to component props
function mapStateToProps(state) {
    return {
        value: state.count
    };
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
    return {
        onIncreaseClick: () => dispatch(increaseAction)
    };
}

// Connected Component
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);

容器組件的特征恰恰相反

1.負責管理數據和業務邏輯,不負責UI的呈現
2.帶有內部狀態
3.使用redux的API

UI組件負責UI的呈現,容器組件負責管理數據和邏輯.
react-redux規定,所有的UI組件都由用戶提供,容器組件則是由react-redux自動生成,也就是說,
用戶負責視覺層,狀態管理則是全部交給它.

connect()

react-redux提供connect方法,用于從UI組件生成容器組件.
connect的意思,就是將這兩種組件連起來.
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);
Counter是UI組件,App就是由React-Redux通過connect方法自動生成的容器組件.
但是,因為沒有定義業務邏輯,上面這個容器組件毫無意義,只是Ui組件的一個單純的包裝層.
為了定義業務邏輯,需要給出下面兩方面的信息.

1.輸入邏輯:外部的數據(即state對象)如何轉化為UI組件的參數.
2.輸出邏輯:用戶發出的動作如何變為Action對象,從UI組件傳出去

connect方法接受兩個參數:mapStateToProps和mapDispatchToProps,他們定義了UI組件的業務邏輯,
前者負責輸入邏輯,即將state映射到Ui組件的參數(props),后者負責輸出邏輯,即將用戶對UI組件的操作映射成Action.

mapStateToProps()

mapStateToProps是一個函數,它的作用就是像它的名字那樣,建立一個從(外部的)state對象到(Ui組件的)props對象的映射關系.
作為函數,mapStateToProps執行后應該返回一個對象,里面的每一個鍵值對就是一個映射.
mapStateToProps會訂閱store,每當state更新的時候,就會自動執行,重新計算UI組件的參數,從而
觸發UI組件的重新渲染.
mapStateToProps的第一個參數是state對象.

mapDispatchToProps

mapDispatchToProps是connect函數的第二個參數,用來建立UI組件的參數到store.dispatch方法的映射,
也就是說,他定義了哪些用戶的操作應該當作Action,傳給Store,它可以是一個函數,也可以是一個對象.
如果mapDispatchToProps是一個函數,會得到dispatch和ownProps(容器組件的props對象)兩個參數.
作為函數,應該返回一個對象,該對象的每個鍵值對都是一個映射,定義了UI組件的參數怎樣發出Action.

組件

connect方法生成容器組件以后,需要讓容器組件拿到state對象,才能生成UI組件的參數.
react-redux提供Provider組件,可以讓容器組件拿到state.
Provider在根組件外面包了一層,這樣一來,App的所有子組件就默認都可以拿到state了.
它的原理是React組件的context屬性.
react-redux自動生成的容器組件的代碼,就類似上面這樣,從而拿到store.

render(
    
        
    ,
    document.getElementById("root")
);

React-Router路由庫

使用React-Router的項目,與其他項目也沒有不同之處,也是使用Provider在Router外面包一層,畢竟Provider的唯一功能就是傳入store對象.

const root = ({ store }) => (
    
        
            
        
    
);

GPU云服務器云服務器 react-redux 的用法 cdn的用法 find的用法

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84334.html

react-redux用法及源碼解讀

摘要：帶有內部狀態，內部可以使用。代表監聽的全局，也可以說是全局的，表示該組件自身攜帶的方法?；卮饐栴}是通過應用的，將通過頂層組件傳遞到上下文環境中。所有頁面集合緩存不用每次都重新加載通過綁定用法完參考文章 react-redux把組件分為UI組件和容器組件。先看圖下圖： showImg(https://segmentfault.com/img/bVbkVBz?w=1378&h=1194);...

Zoom 2019-08-23 14:00 評論0 收藏0
一篇文章總結redux、react-redux、redux-saga

摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監聽某個，當某個觸發后，可以使用發起異步操作，操作完成后使用函數觸發，同步更新，從而完成整個的更新。不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。具有高效且靈活的特性。 React Redux 將組件區分為容器組件和 UI 組件前者會處理邏輯...

April 2019-05-21 19:08 評論0 收藏0
關于React-redux的Provider, connect的解析

摘要：的實現原理作為一個通用的模塊，主要還是用來應用項目中的變更通過做連接，可以在的項目中將兩者結合的更好。上述便是兩個核心的用法啦。如有不對，還請指正。 react-redux的實現原理： Redux作為一個通用的模塊，主要還是用來應用項目中state的變更,通過react-redux做連接，可以在React+Redux的項目中將兩者結合的更好。 React-redux是一個輕量級的封裝庫...

elva 2019-08-23 14:54 評論0 收藏0
帶著問題看 react-redux 源碼實現

摘要：更新類型及具體內容負責更新數據的具體邏輯。即根據當前及攜帶的信息合成新的數據。下面帶著這些問題深入了解本質上也是高階組件的一種實現。核心實現聲明以被子組件獲取。通過的實現，我們可以得到的重要性淺比較的實現由此可以看到的重要性。前言 Redux作為通用的狀態管理器，可以搭配任意界面框架。所以并搭配react使用的話就要借助redux官方提供的React綁定庫react-redux，以高效靈活的...

JellyBool 2019-05-22 18:00 評論0 收藏0
React-redux基礎

摘要：簡介創建的函數，返回一個對象，包含等方法合并多個中間件處理，在實際的前調用一系列中間件，類似于綁定和函數式編程中常見的方法，介紹官方提供的綁定庫。前言在學習了React之后，緊跟著而來的就是Redux了~ 在系統性的學習一個東西的時候，了解其背景、設計以及解決了什么問題都是非常必要的。接下來記錄的是，我個人在學習Redux時的一些雜七雜八~ Redux是什么通俗理解 h...

jsyzchen 2019-08-23 15:09 評論0 收藏0