react開發教程（九）redux基礎

muzhuyu 發布于2019-08-21 17:53 / 2649人閱讀

摘要：案例代碼定義計算規則，即個商品價值戀人結算完成，當前購物車為空單身狗根據計算規則生成定義數據即變化之后的派發規則觸發數據變化上一篇開發教程八組件通信下一篇開發教程十結合

Readux基礎 什么是redux？

簡單點回答就是，一個管理數據的全局對象，但是它有單一狀態樹的概念，所謂的單一狀態樹，就是指“所有的 state都以一個對象樹的形式儲存在一個單一的 store 中。”

頁面中的所有狀態或者數據，都應該用這種狀態樹的形式來描述；頁面上的任何變化，都應該先去改變這個狀態樹，然后再通過某種方式實現到頁面上。

或者換句話說，我們要做的核心工作，就是用單個對象去描述頁面的狀態，然后通過改變這個對象來操控頁面。

使用場景

無論是移動端還是 pc 端，當你使用 React 或者 vue 開發組件化的 SPA 程序時組件之間共享數據（狀態）共享本身就是一個問題，既然是共享的那么就沒有必要在每個組件中都重新獲取，因此每個系統都需要一個管理多組件使用的公共信息的功能，這就是 Redux 的作用。

核心概念

Action：是把數據從應用傳到 store 的有效載荷，通俗一點就是描述一個動作
比如：
你的女朋友給你發了個消息，消息的內容就是，"快去給我清空購物車"，那么這個內容在redux中就是action的意思

Reducer：Action 只是描述了有事情發生了這一事實，并沒有指明應用如何更新 state。而這正是 reducer 要做的事情。一般稱其為規則
比如：
你女朋友已經給你發完消息了，但是只是一個消息，你是執行者，你是怎么執行的他不關心，那么你執行的這個過程就是reducer，為什么叫規則那，因為你執行的這個過程本就是規則，你先得有錢，然后登錄他的帳號，然后結算

Store：Store 就是把 Reducer 和 action 聯系到一起的對象。
Store 有以下職責：
維持應用的 state；
提供 getState() 方法獲取 state；
提供 dispatch(action) 方法更新 state；
通過 subscribe(listener) 注冊監聽器；

安裝

如果單純使用 Redux 僅僅安裝 Redux 即可，執行npm install redux --save，不過在 React 中使用 Redux 肯定會用到 react-redux 這一工具，因此這里一起安裝完，執行npm install react-redux --save。

案例代碼

// 定義計算規則，即 reducer
function BoyFriend(state = {
  cart: "10個商品價值100000000",
  relationship: "戀人"
}, action) {
  switch (action.type) {
    case "JIEZHANG":
      state.cart = "結算完成，當前購物車為空"
      return state
    case "FENSHOU":
      state.relationship = "單身狗"
      return state
    default:
      return state
  }
}

// 根據計算規則生成 store
let store = createStore(BoyFriend)

// 定義數據（即 state）變化之后的派發規則
store.subscribe(() => {
  console.log("current state", store.getState())
})

// 觸發數據變化
store.dispatch({ type: "JIEZHANG" })
store.dispatch({ type: "JIEZHANG" })
store.dispatch({ type: "FENSHOU" })

上一篇：react開發教程（八）React組件通信
下一篇：react開發教程（十）redux結合react

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux 軟件開發基礎教程

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

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

react開發教程（十）redux結合react

摘要：描述和之間沒有關系。但是還是比較適合和搭配的，因為允許你以的形式來描述界面，而非常擅長控制的變化。應用中應有且僅有一個。只需要在渲染根組件時使用即可。創建上一篇開發教程九基礎描述 Redux 和 React 之間沒有關系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因為 React 允許你以 state 的形式...

jsliang 2019-08-02 15:58 評論0 收藏0
react開發教程（十）redux結合react

摘要：描述和之間沒有關系。但是還是比較適合和搭配的，因為允許你以的形式來描述界面，而非常擅長控制的變化。應用中應有且僅有一個。只需要在渲染根組件時使用即可。創建上一篇開發教程九基礎描述 Redux 和 React 之間沒有關系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因為 React 允許你以 state 的形式...

yck 2019-08-21 17:53 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0