實例講解Redux

roland_reed 發布于2019-08-20 12:21 / 1158人閱讀

摘要：實例講解示例代碼地址在這里你可以通過命令到本地，也可以直接下載。之后便可以通過執行示例代碼。下面結合實例中的內容理解上述概念。更改應用的狀態通過方法將發送到函數中，進行狀態的更新。分別用來處理頁面和頁面狀態的更新。

實例講解Redux

示例代碼地址在這里 ,你可以通過git clone命令clone到本地，也可以直接下載。

然后通過執行npm install 安裝所依賴的模塊。之后便可以通過node 執行示例代碼。

什么是Redux

隨著 JavaScript 單頁應用開發日趨復雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。這些 state 可能包括服務器響應、緩存數據、本地生成尚未持久化到服務器的數據，也包括 UI 狀態，如激活的路由，被選中的標簽，是否顯示加載動效或者分頁器等等。

簡單來說Redux就是javaScript 的狀態管理器。同時,Redux支持React、Angular、Ember、jQuery等。

到這里你可能并不知道該如何使用Redux，別著急，在了解如何使用之前，需要先理解相關的基本概念。示例代碼可查看demo1/app.js

State

在一個可以進行用戶交互的界面上，當我們觸發了交互事件的時候，界面也會跟著進行更新。例如在一個app中的下拉刷新，當我們進行下拉刷新這個動作時，會去請求服務器數據，當返回結果時app的頁面會更新。界面的改變我們就可以看做是狀態的變化。而狀態的變化是由于我們進行了某個動作。在Redux中，尤其需要注意的是State是只讀的，且狀態的變化只能通過Reducer函數進行轉換，

Action

Action就是你與界面進行交互的行為。它是一個對象且必須要包含一個type屬性，用來描述你要做的是什么事。

Store

Store就是應用狀態的容器。用來維護應用的state、獲取state、更新state、監聽state變化等。這里需要注意的是整個應用只有一個Store

Reducer

一個純函數，接收當前的state和一個action參數，根據當前的行為，即action的type屬性返回一個新的state。狀態的更新只能通過這個函數。

Talk is cheap, Show me the code!

可能看了上述內容你仍然不知道什么是Redux，Redux能干什么。下面結合實例demo1/app.js中的內容理解上述概念。

1.引入相關模塊(這里沒有使用ES6的方式是為了能使用node命令直接查看結果，node命令無法識別import。當然你也可以通過配置babel的方式使用import語法)

var { createStore } = require("redux");
//import { createStore } from "redux" //es6方式引入

2.定義Reducer,來進行狀態的更新

var defaultState = "JavaScript"
function programLanguage(state = defaultState, action) {
    switch (action.type) {
        case "IOS":
            return action.language;
        case "WEB":
            return action.language;
        case "SNACK":
            return action.language;
        default:
            return state;
    }
}

從上述代碼可以看到，我們定義了一個programLanguage方法，其實這就是一個Reducer,它接受了當前state和action參數。用來更新state。

3.創建store。

let store = createStore(programLanguage);

再次強調整個應用中只能有一個store，即createStore函數只能被調用一次。

createStore的定義如下:

function createStore(reducer, preloadedState, enhancer);

可以看到的是createStore接受三個參數

reducer：就是上述的reducer函數，這里不再贅述

preloadedState: 初始state

enhancer：組合store creator的高級函數,返回一個新的強化過的store creator。

4.更改應用的狀態

store.dispatch({ type: "default" });
store.dispatch({ language: "Swift", type: "IOS" });
store.dispatch({ language: "Ruby", type: "WEB" });
store.dispatch({ language: "Python", type: "SNACK" });

通過dispatch方法將action發送到reducer函數中，進行狀態的更新。

執行node demo1/app.js 的打印結果如下

JavaScript
JavaScript Swift
JavaScript Swift Ruby
JavaScript Swift Ruby Python

當執行第一句代碼store.dispatch({ type: "default" });時返回的是JavaScript。是由于dispatch方法內部會調用在createStore中注冊的Reducer函數，即programLanguage函數。由programLanguage的內部邏輯return的是一個defaultState。此時整個應用的狀態為JavaScript

當執行第二句代碼store.dispatch({ language: "Swift", type: "IOS" });時返回了JavaScript Swift。是由于type為IOS,programLanguage返回的是state + " " +action.language; 因為上一句代碼將應用的狀態變為了JavaScript，所以結果自然就是JavaScript Swift。同時整個應用的狀態也會變成JavaScript Swift。

同理，第三句和第四句代碼也是如此。

5.訂閱狀態的更新

store.subscribe(() =>
    console.log(store.getState())
);

為了方便查看狀態的變化。這里調用了subscribe方法，每當狀態發生變化時都會調用其回調函數。

store.getState() 獲取應用的當前狀態。

優化操作 Action creator

隨著頁面的增加，Action必然也會越來越多，如果Action內部所攜帶的消息也很多。此時如果需要狀態的更新，就需要寫復雜的Action，造成代碼可讀性差，文件臃腫。所以我們可以使用Action creator來構造Action。當需要進行狀態更新就傳入相應的數據到Action creator中生成Action并返回。

在demo2中

我們創建了一個HomeAction的文件專門用來存放Action Creator。在此文件中我們創建了三個Action creator，分別是action_ios、action_web、action_snack，并將創建Action的任務交給這三個函數。

與此同時在我們demo2/app.js中需要dispatch一個action的時候。只需要從Action creator中取出Action就行了。并不需要我們手動的去創建，如此一來便大大增加代碼的可讀性，可維護性。

分散Reducer

同樣的隨著業務量的增加，Reducer必定也會越來越大。所以我們可以按模塊的不同來拆分Reducer。將一個大的Reducer拆分成幾個小的reducer。

在demo3中reducer文件夾中，我們按照模塊的不同的拆分homeReducer和profileReducer。分別用來處理home頁面和profile頁面狀態的更新。

那么問題來了，這么拆分如何使用createStore去創建store呢，畢竟createStore只能傳一個Reducer參數。而且createStore只能調用一次。

別著急，在redux中提供了一個combineReducers的方法，用來組合我們的Reducer。

const mainReducer = combineReducers({
    homeReducer,
    profileReducer
})
let store = createStore(mainReducer);

最后

謝謝閱讀，如果感覺本文對你有用，那將是我的榮幸。如果有寫的錯誤的地方也請留言指正。

云服務器 GPU云服務器實例講解 Redux redux源碼 redux-saga

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

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

實例講解基于 React+Redux 的前端開發流程

摘要：宅印前端基于的模式開發，我們指定了一套分工明確的并行開發流程。下面通過一個蘋果籃子實例，來看看整個應用開發流程。容器負責接收中的和并發送大多數時候需要和直接連接，容器一般不需要多次使用，比如我們這個應用的蘋果籃子。前言：在當下的前端界，react 和 redux 發展得如火如荼，react 在 github 的 star 數達 42000 +，超過了 jquery 的 39000+，...

chaosx110 2019-08-19 18:25 評論0 收藏0
實例講解react+react-router+redux

摘要：而函數式編程就不一樣了，這是模仿我們人類的思維方式發明出來的。數據流在中，數據的流動是單向的，即從父節點傳遞到子節點。數據流嚴格的單向數據流是架構的設計核心。前言總括：本文采用react+redux+react-router+less+es6+webpack,以實現一個簡易備忘錄(todolist)為例盡可能全面的講述使用react全家桶實現一個完整應用的過程。代碼地址：Re...

RiverLi 2019-08-21 11:20 評論0 收藏0
dva框架使用詳解及Demo教程

摘要：框架的使用詳解及教程在前段時間，我們也學習講解過框架的基本使用，但是有很多同學在交流群里給我的反饋信息說，框架理解上有難度，看了之后還是一臉懵逼不知道如何下手，很多同學就轉向選擇使用框架。 dva框架的使用詳解及Demo教程在前段時間，我們也學習講解過Redux框架的基本使用，但是有很多同學在交流群里給我的反饋信息說，redux框架理解上有難度，看了之后還是一臉懵逼不知道如何下手，很...

bergwhite 2019-08-23 11:47 評論0 收藏0
一篇文章總結redux、react-redux、redux-saga

摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監聽某個，當某個觸發后，可以使用發起異步操作，操作完成后使用函數觸發，同步更新，從而完成整個的更新。不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。具有高效且靈活的特性。 React Redux 將組件區分為容器組件和 UI 組件前者會處理邏輯...

April 2019-05-21 19:08 評論0 收藏0
redux-saga框架使用詳解及Demo教程

摘要：通過創建將所有的異步操作邏輯收集在一個地方集中處理，可以用來代替中間件。 redux-saga框架使用詳解及Demo教程前面我們講解過redux框架和dva框架的基本使用，因為dva框架中effects模塊設計到了redux-saga中的知識點，可能有的同學們會用dva框架，但是對redux-saga又不是很熟悉，今天我們就來簡單的講解下saga框架的主要API和如何配合redux框...

Nosee 2019-08-23 11:49 評論0 收藏0