react-redux用法及源碼解讀

Zoom 發布于2019-08-23 14:00 / 3139人閱讀

摘要：帶有內部狀態，內部可以使用。代表監聽的全局，也可以說是全局的，表示該組件自身攜帶的方法。回答問題是通過應用的，將通過頂層組件傳遞到上下文環境中。所有頁面集合緩存不用每次都重新加載通過綁定用法完參考文章

react-redux把組件分為UI組件和容器組件。先看圖下圖：

下面讓我們帶著問題學習一下react-redux:
1. react-redux如何將store分發到不同組件中？
2. react-redux如何做到store發生變化，對應的組件重新render，也就是說如何subscribe store？

UI組件(純組件)

UI組件特征：

只負責渲染UI，沒有邏輯。

沒有狀態state。

所有數據都由父組件傳遞，也就是從props獲取。

容器組件

特征：

負責業務邏輯和數據管理。

帶有內部狀態，內部可以使用state。

使用redux的API。

react-redux API解釋

connect()

用于包裹UI組件生成容器組件， 也就是connect連接的意思。

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

// mapStateToProps(state, ownProps?): function, 返回的是Object(stateProps), 該方法將容器組件state映射到UI組件的props, 也就是輸入邏輯, 重點是mapStateToProps會訂閱store，每當store更新時， 會重新執行， 如果計算出的UI組件的參數發生變化， 就會觸發UI組件的重新渲染。state, 代表監聽的全局store，也可以說是全局的state， ownProps表示該組件自身攜帶的props方法。

// mapDispatchToProps(dispatch, [ownProps])：function/Object, 如果返回的是對象，則對應每個Action 的函數名， 在UI組件中調用需要dispatch, 如果返回的是函數，則已經被dispatch包裹(可以用bindActionCreators)。 該參數主要是映射用戶動作Action， 從UI組件傳遞出去， 也就是輸出邏輯，這里可以用到redux的api bindActionCreators,

// mergeProps(stateProps, dispatchProps, ownProps) 指定傳入的UI組件的props， 默認是Object.assign({}, ownProps, stateProps, dispatchProps)

// options: Obejct, 可以進一步定義connect功能， 如定義store的來源，指定props的一些更新規則等。


// action,js 
...
export const initSelectConcact = (streamConcacts: StreamToConcact): InitSelectConcactAction => ({
    type: LOCAL_CONCACT,
    streamConcacts,
});
export const testFetch = (dispatch) => dispatch(initSelectConcact([]));

// UnreadCards.js
class UnreadCards
...
componentDidMount() {
    this.props.fetchStreamConcact();
}

const mapStateToProps = (state, ownProps) => ({
  users: getUsers(state),
});
const mapDispatchToProps = (dispatch, ownProps) => ({
  fetchStreamConcact: () => testFetch(dispatch),  // 或者如下
  fetchStream: bindActionCreators(initSelectConcact, dispatch)
});
const mergeProps = (stateProps, dispatchProps, ownProps) => {
  console.log("mergeProps", stateProps, dispatchProps, ownProps);
  return Object.assign({}, ownProps, {
    todos: stateProps.todos[ownProps.userId],
    addTodo: (text) => dispatchProps.addTodo(ownProps.userId, text),
  });
};
const options = {
  pure: true,
  storeKey: "store",
};

export default connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(UnreadCards);

Provider

connect生成容器組件后，需要將是state數據傳遞到子組件中，有兩種方案：

A -> B -> C組件數據中傳遞，可以通過props一層層的傳遞。

A -> B -> C利用React 的 context屬性，將state綁在跟組件A的context中， A下面的所有子組件都可以通過context拿到是state。
所以，Provider應用第二種，將全局state綁定在跟組件的context上，所以Provider的一般用法是在最頂層組件。

回答問題：

1.react-redux是通過應用React的Context，將store通過頂層組件傳遞到上下文環境中。源碼截圖如下：

2.經過上面的API的分析，我們了解connect主要是將我們需要的（組件對應的全局state通過reducer定義的key，從全局state篩選出來）數據、將store和action對應， merge兩者以props形式傳遞給connect包裹的組件，而mapStateToProps內部監聽了store的變化，每當store發生變化，對應映射的state也相應變化，以props 發生變化而update render，看如下源碼：

介紹一個高階組件connectWithActions

為避免在connect參數mapDispatchToProps中反復寫action，我將所有Action通過方法綁定在props的actions上，不用每次去映射當前頁面所需的action。

import { bindActionCreators } from "redux";
import { connect } from "react-redux";

// 所有頁面action集合
import * as actions from "./actions";

// 緩存actions, 不用每次render都重新加載
let cachedActions;

// action通過bindActionCreators綁定dispatch,
const bindActions = (dispatch, ownProps) => {
  if (!cachedActions) {
    cachedActions = {
      dispatch,
      actions: bindActionCreators(actions, dispatch),
    };
  }

  return cachedActions;
};

const connectWithActions = (mapStateToProps: MapStateToProps, mergeProps, options) => (
  component,
) => connect(mapStateToProps, bindActions, mergeProps, options)(component);

export default connectWithActions;


// 用法
class HomeScreen extennds Component {

    componentWillMount() {
        this.props.actions.getList();
    }
    ...

}
export default connectWithActions(state => ({
    users: state.users, 
}))(HomeScreen);

-----完-----

參考文章

GPU云服務器云服務器源碼解讀及用法 webrtc源碼解讀 webrtc fec源碼解讀

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

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

帶著問題看 react-redux 源碼實現

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

JellyBool 2019-05-22 18:00 評論0 收藏0
重讀redux源碼(二)

摘要：函數組合，科里化的串聯結合示例源碼，實現也很優雅，對于返回的，將等參數傳遞進去，然后執行，等待回調異步完成再。對于正常對象則進行下一步。前言作為前端狀態管理器，這個比較跨時代的工具庫redux有很多實現和思想值得我們思考。在深入源碼之前，我們可以相關注下一些常見問題，這樣帶著問題去看實現，也能更加清晰的了解。常見問題大概看了下主要有這么幾個： redux三大原則這個可以直接參考...

dingda 2019-05-23 13:54 評論0 收藏0
[源碼解讀] react-redux

摘要：本文并不逐行地對源碼進行細致分析，不如說是基于以下幾個問題，對源碼進行大致的掃覽。我們已經知道，中，允許用戶注冊監聽器，這些監聽器會在每次執行結束后遍歷觸發。省略一些無關代碼其中，是為了在嵌套的中嵌套執行。 react-redux 源碼解讀 [TOC] 前置知識閱讀本篇文章前，請先確認你是否了解以下知識： react redux 高階組件 react diff 機制其中高階組件...

Olivia 2019-08-21 11:52 評論0 收藏0
dva系列源碼解讀

摘要：介紹概述本次對源碼的解讀除了傳統的從入手外還將引入帶入問題讀源碼的理念，因為只有這樣當讀完源碼之后才會有切身的收獲。介紹概述本次對 dva 源碼的解讀除了傳統的從 api 入手外還將引入帶入問題讀源碼的理念，因為只有這樣當讀完源碼之后才會有切身的收獲。另外除了 dva 的源碼外還會解讀一些常用的 dva 插件的源碼。電子書 https://dva-source-docs.net...

focusj 2019-08-23 18:30 評論0 收藏0
React-redux基礎

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

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