react-redux

sanyang 發布于2019-08-20 16:22 / 1570人閱讀

摘要：主要用于構建，被認為是中的視圖。高效通過對的模擬，最大限度地減少與的交互。也就是說，用戶負責視覺層，狀態管理則是全部交給它。該回調函數必須返回一個純對象，這個對象會與組件的合并。

React 定義：

React 是一個用于構建用戶界面的 JAVASCRIPT 庫。
React主要用于構建UI，React 被認為是 MVC 中的 V（視圖）。

特點：

聲明式設計 ?React采用聲明范式，可以輕松描述應用。

高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。

靈活 ?React可以與已知的庫或框架很好地配合。

JSX ? JSX 是 JavaScript 語法的擴展

組件 ? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。

單向響應的數據流 ? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。

為什么需要Redux？

React 只是 DOM 的一個抽象層，并不是 Web 應用的完整解決方案。有兩個方面，react沒有涉及：

代碼結構

組件之間的通信

React 能夠根據 state 的變化來更新 view，setState 方法用于改變組件當前的 state，所以可以把更改 state 的邏輯寫在各自的組件里，但這樣做的問題在于，當項目邏輯變得越來越復雜的時候，將很難理清 state 跟 view 之間的對應關系（一個 state 的變化可能引起多個 view 的變化，一個 view 上面觸發的事件可能引起多個 state 的改變）。我們需要對所有引起 state 變化的情況進行統一管理，這種情況下，就可能需要用到redux了。

簡單說，React的核心是使用組件定義界面的表現，那么在使用React的時候我們通常還需要一套機制去管理組件與組件之間，組件與數據模型之間的通信。

Redux 核心概念：

Store
作用：保存數據的地方，用于管理整個應用的數據。它實際上是一個 Object tree ，整個應用只能有一個 Store。

產生：傳入 reducer 和可選的初始 state 值，通過 createStore 方法生成

const store = createStore(reducer,initialState)

Action
作用：描述用戶的行為，也就是 View 發出的通知，被 store 接收
產生：通過 action creator 產生

const ADD_TODO = "添加 TODO";
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo("Learn Redux")

Reducer
作用：根據 action，計算出新的 state，是一個純函數
產生：傳入 state 和 action 參數，返回一個新的 state

const reducer = function (state, action) {
  // ...
  return new_state;
}

reducer 可以進行拆分，每個子 reducer 分別負責計算 view 上面的特定組件，返回局部的 state，再通過 combineReducers 將 reducer 進行合并，就可以合并得到完整的state，刷新視圖。

const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})

redux的工作流程：

Redux應用數據的生命周期遵循下面4個步驟：
1）調用store.dispatch(action), 可以在任何地方進行;
2）Redux store調用傳入的reducer函數，并且將當前的state樹與action傳入。
3）根reducer將多個子reducer輸出合并成一個單一的state樹;
4）Redux store保存了根reducer返回的完整的state樹。
5）新的state樹就是應用的下一個狀態，現在就可以根據新的state tree來渲染UI。

Redux與Flux

Flux 是一種架構思想，專門解決軟件的結構問題。它跟 MVC 架構是同一類東西，但是更加簡單和清晰，它跟 React 本身沒什么關系，它可以用在 React 上，也可以用在別的框架上。
Flux 存在多種實現（至少15種），Facebook 官方實現版本：

View：視圖層

Action（動作）：視圖層發出的消息（比如mouseClick）

Dispatcher（派發器）：用來接收Actions、執行回調函數

Store（數據層）：用來存放應用的狀態，一旦發生變動，就提醒Views要更新頁面

Flux的數據管理流程：

Redux 的作用跟 Flux 是一樣的，它可以看作是 Flux 的一種實現，但是又有點不同，具體的不同總結起來就是：

Redux 只有一個 store 而 Flux 里面會有多個 store 存儲應用數據，并在 store 里面執行更新邏輯，當 store 變化的時候再通知 controller-view 更新自己的數據，Redux 將各個 store 整合成一個完整的 store，并且可以根據這個 store 推導出應用完整的 state。

沒有 Dispatcher。 Redux 中沒有 Dispatcher 的概念，它使用 reducer 來進行事件的處理，它根據應用的狀態和當前的 action 推導出新的 state。Redux 中有多個 reducer，每個 reducer 負責維護應用整體 state 樹中的某一部分，多個 reducer 可以通過 combineReducers 方法合成一個根reducer，這個根reducer負責維護完整的 state，當一個 action 被發出，store 會調用 dispatch 方法向某個特定的 reducer 傳遞該 action，reducer 收到 action 之后執行對應的更新邏輯然后返回一個新的 state，state 的更新最終會傳遞到根reducer處，返回一個全新的完整的 state，然后傳遞給 view。

簡單說，Redux 和 Flux 之間最大的區別就是對 store/reducer 的抽象，Flux 中 store 是各自為戰的，每個 store 只對對應的 controller-view 負責，每次更新都只通知對應的 controller-view；而 Redux 中各子 reducer 都是由根reducer統一管理的，每個子reducer的變化都要經過根reducer的整合。

flux與redux對比圖： flux

redux

React-Redux

為了方便使用，Redux 的作者封裝了一個 React 專用的庫 React-Redux。
這個庫是可以選用的。實際項目可以選擇直接使用 Redux，或者使用 React-Redux。React-Redux 雖然提供了便利，但需要掌握額外的 API，并且要遵守它的組件拆分規范。
React-Redux 將所有組件分成兩大類：UI 組件和容器組件。

UI組件特點：

只負責 UI 的呈現，不帶有任何業務邏輯

沒有狀態（即不使用this.state這個變量）

所有數據都由參數（this.props）提供

不使用任何 Redux 的 API

容器組件特點：

負責管理數據和業務邏輯，不負責 UI 的呈現

帶有內部狀態

使用 Redux 的 API

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

React-Redux 部分 API

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

connect()用于從 UI 組件生成容器組件。

connect的意思，就是將這兩種組件連起來。

mapStateToProps是一個函數。

它的作用就是像它的名字那樣，建立一個從（外部的）state對象到（UI 組件的）props對象的映射關系。

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

任何時候，只要 Redux store 發生改變，mapStateToProps 函數就會被調用。該回調函數必須返回一個純對象，這個對象會與組件的 props 合并。如果你省略了這個參數，你的組件將不會監聽 Redux store。第二個參數 ownProps，為傳遞到組件的 props。

mapDispatchToProps是connect函數的第二個參數，用來建立 UI 組件的參數到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應該當作 Action，傳給 Store。它可以是一個函數，也可以是一個對象。

組件

connect 方法生成容器組件以后，需要讓容器組件拿到state對象，才能生成 UI 組件的參數。
React-Redux 提供Provider組件，可以讓容器組件拿到state。

React-router

React-router采用react組件的方式來實現router，通過管理 URL，實現組件的切換和狀態的變化。

相關路由組件：

：路由容器組件

：定義URL路徑與組件的對應關系

: 指定默認情況下加載的子組件

: 用于路由的跳轉，即用戶訪問一個路由，會自動跳轉到另一個路由

:用于取代a元素，生成一個鏈接，允許用戶點擊后跳轉到另一個路由。它基本上就是a元素的React 版本，可以接收Router的狀態。

相關路由屬性：

path 屬性:Route組件的path屬性指定路由的匹配規則

histroy 屬性: Router組件的history屬性，用來監聽瀏覽器地址欄的變化，并將URL解析成一個地址對象，供 React Router 匹配。

   render((
     //開始創建路由表
       //聲明每一個路由
         
         //每個路由
       
     
   ), document.getElementById("example"))

Demo的思路：

設計好整個應用的state

根據用戶在view上的行為，定義好所有action

根據定義好的action，創建相應的reducer處理state，合并reducer

根據定義好的reducer，生成store

通過組件，將store傳入router組件使用

編寫UI組件，并通過connect自動生成容器組件

根據url，react-router調用相應的組件，顯示view

云服務器 GPU云服務器 react-redux

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

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

React-Redux 中文文檔

摘要：介紹快速開始是的官方綁定庫。通常你可以以下面這種方式調用方法基礎教程為了進一步了解如何實際使用，我們將一步一步創建一個一個實例跳轉到介紹快速開始 React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數據，并且向store分發actions以更新數據安裝在你的React app中使用React-Redux： npm i...

MobService 2019-08-26 13:22 評論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實現react組件之間數據共享

摘要：上篇文章寫到了實現組件數據共享的方法，但是在中，作者提供了一個更優雅簡便的模塊實現組件之間數據共享。那就是利用利用實現組件數據之間數據共享安裝從導入組件將賦予的屬性將根組件用包裹起來。上篇文章寫到了redux實現組件數據共享的方法，但是在react中，redux作者提供了一個更優雅簡便的模塊實現react組件之間數據共享。那就是利用react-redux 利用react-redux...

smallStone 2019-08-20 16:31 評論0 收藏0
react-redux插件入門

摘要：描述這個插件可以讓我們的代碼更加的簡潔和美觀。安裝使用提供了兩個重要的接口使用了這個插件，的和就可以忘記來，它們就用不著了。現在有美女個。可先查看我的redux簡單入門 react-redux簡介 react-redux是使用redux開發react時使用的一個插件，另外插一句，redux不是react的產品，vue和angular中也可以使用redux；下面簡單講解，如何使用rea...

Baaaan 2019-08-22 16:28 評論0 收藏0
React手稿之 React-Redux

摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調試插件日志安裝組件。然后加入到中即可例如擴展程序需要在應用市場安裝然后在中使用增強功能將加入即可在線實例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...

Freelander 2019-08-23 12:57 評論0 收藏0
快速理解react-redux

摘要：和的結合簡述相信很多前端開發者都聽說或使用過，我曾寫過一篇關于快速理解的文章，雖說是快速理解，但實際上更應該叫做復習吧。它通過高階函數，純函數使我們在編寫組件時完全不用接觸相關內容，只通過將組件和數據連接起來即可。 react-redux react和redux的結合簡述相信很多前端開發者都聽說或使用過react-redux，我曾寫過一篇關于快速理解redux的文章，雖說是快...

MoAir 2019-08-23 14:11 評論0 收藏0