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

資訊專欄INFORMATION COLUMN

react-redux用法及源碼解讀

Zoom / 3147人閱讀

摘要：帶有內(nèi)部狀態(tài)，內(nèi)部可以使用。代表監(jiān)聽的全局，也可以說是全局的，表示該組件自身攜帶的方法?；卮饐栴}是通過應(yīng)用的，將通過頂層組件傳遞到上下文環(huán)境中。所有頁面集合緩存不用每次都重新加載通過綁定用法完參考文章

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

下面讓我們帶著問題學(xué)習(xí)一下react-redux:
1. react-redux如何將store分發(fā)到不同組件中？
2. react-redux如何做到store發(fā)生變化， 對(duì)應(yīng)的組件重新render， 也就是說如何subscribe store？

UI組件(純組件)
UI組件特征：

只負(fù)責(zé)渲染UI， 沒有邏輯。

沒有狀態(tài)state。

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

容器組件
特征：

負(fù)責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)管理。

帶有內(nèi)部狀態(tài)， 內(nèi)部可以使用state。

使用redux的API。

react-redux API解釋
connect()
用于包裹UI組件生成容器組件， 也就是connect連接的意思。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]);

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

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

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

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


// 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數(shù)據(jù)傳遞到子組件中， 有兩種方案：

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

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

回答問題：

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

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


介紹一個(gè)高階組件connectWithActions

為避免在connect參數(shù)mapDispatchToProps中反復(fù)寫action， 我將所有Action通過方法綁定在props的actions上， 不用每次去映射當(dāng)前頁面所需的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);

-----完-----

參考文章

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

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

相關(guān)文章

  • 帶著問題看 react-redux 源碼實(shí)現(xiàn)

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

    JellyBool 評(píng)論0 收藏0

  • 重讀redux源碼(二)

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

    dingda 評(píng)論0 收藏0

  • [源碼解讀] react-redux

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

    Olivia 評(píng)論0 收藏0

  • dva系列源碼解讀

    摘要：介紹概述本次對(duì)源碼的解讀除了傳統(tǒng)的從入手外還將引入帶入問題讀源碼的理念，因?yàn)橹挥羞@樣當(dāng)讀完源碼之后才會(huì)有切身的收獲。 介紹 概述 本次對(duì) dva 源碼的解讀除了傳統(tǒng)的從 api 入手外還將引入帶入問題讀源碼的理念，因?yàn)橹挥羞@樣當(dāng)讀完源碼之后才會(huì)有切身的收獲。另外除了 dva 的源碼外還會(huì)解讀一些常用的 dva 插件的源碼。 電子書 https://dva-source-docs.net...

    focusj 評(píng)論0 收藏0

  • React-redux基礎(chǔ)

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

    jsyzchen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<