看redux的一些筆記

el09xccxy 發布于2019-08-21 11:39 / 559人閱讀

摘要：不只為組件提供中的數據及擴展方法，它還為定義的組件添加了一系列事件操作，這些事件的核心點就是，然后可以在自己定義的組件內獲得。行為功能是對目的功能和有用行為的一種抽象。下一個中間件函數通常由名為的變量來表示。

redux

這個是好久之前寫的，一直忘記粘過來，里面有一些是寫作格式是我自己定義的，所以和segmentfault的markdown語法有出入，圖片也不能加載，所以原文效果可以在原網站上瀏覽，敬請賜教。

<------------
文章原網址
------------>

Redux is a predictable state container for JavaScript apps¹.

Redux特性

在過去的十幾年里web page一直都以指數遞增的方式發展，無論是概念上還是編程上想要徹底讀懂這門設計的藝術已經變得不可為，如今在許多大型網站中的一個頁面從DOM與Event的微觀角度往往聚集著一系列復雜并瑣碎的行為功能²，它們聚合在一起構成了我們今天可以在瀏覽器端可操作的視圖，正是如此，怎樣管理這些行為功能被提上日程，諸多才華橫溢的工程師們引申出狀態管理的概念，制作出許多優秀的作品，如Redux、flux、flummox、mobxjs、refluxjs、martyjs、javascript-state-machine、vuex等，其中又以redux和flux最為流行。

) } } export default AppContainer Connect

npm i --save react-redux

Connect是由react-redux提供的一個高階函數。源碼中connect函數接收mapStateToProps、mapDispatchToProps、mergeProps、options四個參數返回一個用于生產Component的函數wrapWithConnect，然后再將組件Component作為參數注入wrapWithConnect(WrappedComponent)函數。

參數	描述
mapStateToProps	將state作為返回結果綁定到組件的props對象上
mapDispatchToProps
mergeProps
options	?

export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
  ...
  return function wrapWithConnect(WrappedComponent) {
    ...
  }
}

⁷

值得一說的是hoistStatics函數源于hoist-non-react-statics第三方，作用是將原來組件中的元素拷貝到目標組件。在使用connect函數的時候直接在已聲明的component后面引用connect。

import React, {Component} from "react";
...
import {connect} from "react-redux";

class Login extends Component {
  ...
  render() {
    ...
  }
}
...
export default connect(mapStateToProps, mapDispatchToProps)(Login)

Connect不只為react組件提供store中的state數據及擴展dispatch方法，它還為定義的組件添加了一系列事件操作，這些事件的核心點就是store，然后可以在自己定義的組件內獲得store。

constructor(){
  //獲取store
  this.store = props.store || context.store
  const storeState = this.store.getState()
  //把store的state作為組件的state，后面通過更新state更新組件
  this.state = { storeState }
  //清除組件的狀態，內部是一系列的標示還原
  this.clearCache()
}

附錄

Github源碼	描述
ducks-modular-redux	{ctionTypes, actions, reducer}規則解決方案
react-slingshot
saga-login-flow
login-flow
redux-saga
redux-auth-wrapper
dva
react-redux-tutorial
reduxjs doc	reduxjs中文檔案
alloyteam:react-redux	React 數據流管理架構之 Redux 介紹

redux.js文檔，源自redux.js文檔中首頁的一段話，對redux特性的官方描述。 ?

行為功能是對目的功能和有用行為的一種抽象。這里特指在"web?page"中對視圖的按鈕等DOM元素點擊、頁面路由切換等功能的操作行為，在redux中被稱為action。 ?

applyMiddleware(...middlewares):Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store"s dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain. ?

expressjs，中間件的介紹為expressjs-middleware，概括來說中間件middleware函數能夠訪問請求對象 req、響應對象 res 以及應用程序的請求/響應循環中的下一個中間件middleware函數。下一個中間件函數通常由名為next的變量來表示。 ?

koajs，中間件的介紹為koajs-middleware。 ?

AOP（Aspect-Oriented Programming），面向切面編程，通過預編譯方式和運行期動態代理實現程序功能的統一維護的一種技術，被認為是OOP的一種延續（補充和完善OOP）。 ?

->connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})->wrapWithConnect(WrappedComponent)->class Connect extends Component{}->Connect.contextTypes = {store: storeShape};Connect.propTypes = {store: storeShape}->return hoistStatics(Connect, WrappedComponent)-> ?

云服務器 GPU云服務器 java的一些代碼深度學習的一些應用 php實用的一些代碼數據分析的一些方法

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

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

詳解react、redux、react-redux之間的關系

摘要：或者兄弟組件之間想要共享某些數據，也不是很方便傳遞獲取等。后面要講到的就是通過讓各個子組件拿到中的數據的。所以，確實和沒有什么本質關系，可以結合其他庫正常使用。本文介紹了react、redux、react-redux之間的關系，分享給大家，也給自己留個筆記，具體如下： React 一些小型項目，只使用 React 完全夠用了，數據管理使用props、state即可，那什么時候需要引入...

xioqua 2019-08-23 13:40 評論0 收藏0
FE.SRC-React實戰與原理筆記

摘要：異步實戰狀態管理與組件通信組件通信其他狀態管理當需要改變應用的狀態或有需要更新時，你需要觸發一個把和載荷封裝成一個。的行為是同步的。所有的狀態變化必須通過通道。前端路由實現與源碼分析設計思想應用是一個狀態機，視圖與狀態是一一對應的。 React實戰與原理筆記概念與工具集 jsx語法糖;cli;state管理;jest單元測試; webpack-bundle-analyzer Sto...

PumpkinDylan 2019-08-26 14:04 評論0 收藏0
Redux 基礎 - react 全家桶學習筆記（一）

摘要：二基礎就是一個普通的。其他屬性用來傳遞此次操作所需傳遞的數據，對此不作限制，但是在設計時可以參照標準。對于異步操作則將其放到了這個步驟為添加一個變化監聽器，每當的時候就會執行，你可以在回調函數中使用來得到當前的。注：這篇是16年10月的文章，搬運自本人 blog...https://github.com/BuptStEve/... 零、環境搭建參考資料英文原版文檔中文文檔墻...

aaron 2019-08-23 10:58 評論0 收藏0