一篇文章讀懂 React & redux 前端開發

cppowboy 發布于2019-08-23 13:11 / 3035人閱讀

摘要：如在中在中，聚合積累的結果是當前的對象。被稱為副作用，在我們的應用中，最常見的就是異步操作。至于為什么我們這么糾結于純函數，如果你想了解更多可以閱讀，或者它的中文譯本函數式編程指南。

DvaJS： React and redux based, lightweight and elm-style framework.

https://dvajs.com/

實例項目源碼：https://github.com/AK-47-D/re...

快速上手 #安裝 dva-cli

通過 npm 安裝 dva-cli 并確保版本是?0.9.1?或以上。

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

#創建新應用

安裝完 dva-cli 之后，就可以在命令行里訪問到?dva?命令（不能訪問？）。現在，你可以通過?dva new?創建新應用。

$ dva new dva-quickstart

這會創建?dva-quickstart?目錄，包含項目初始化目錄和文件，并提供開發服務器、構建腳本、數據 mock 服務、代理服務器等功能。

然后我們?cd?進入?dva-quickstart?目錄，并啟動開發服務器：

$ cd dva-quickstart
$ npm start

幾秒鐘后，你會看到以下輸出：

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

在瀏覽器里打開 http://localhost:8000 ，你會看到 dva 的歡迎界面。

#使用 antd

通過 npm 安裝?antd?和?babel-plugin-import?。babel-plugin-import?是用來按需加載 antd 的腳本和樣式的，詳見?repo?。

$ npm install antd babel-plugin-import --save
（國內鏡像：tnpm）

編輯?.webpackrc，使?babel-plugin-import?插件生效。

{
+  "extraBabelPlugins": [
+    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+  ]
}

注：dva-cli 基于 roadhog 實現 build 和 dev，更多?.webpackrc?的配置詳見?roadhog#配置

#定義路由

我們要寫個應用來先顯示產品列表。首先第一步是創建路由，路由可以想象成是組成應用的不同頁面。

新建 route component?routes/Products.js，內容如下：

import React from "react";

const Products = (props) => (
  List of Products
);

export default Products;

添加路由信息到路由表，編輯?router.js?:

+ import Products from "./routes/Products";
...
+

然后在瀏覽器里打開 http://localhost:8000/#/products ，你應該能看到前面定義的?

?標簽。

#編寫 UI Component

隨著應用的發展，你會需要在多個頁面分享 UI 元素 (或在一個頁面使用多次)，在 dva 里你可以把這部分抽成 component 。

我們來編寫一個?ProductList?component，這樣就能在不同的地方顯示產品列表了。

新建?components/ProductList.js?文件：

import React from "react" import PropTypes from "prop-types" import {Button, Popconfirm, Table} from "antd" /** * React Component 有 3 種定義方式，分別是: * React.createClass, class 和 Stateless Functional Component。 * * 推薦最后一種，保持簡潔和無狀態。 * 這是函數，不是 Object，沒有 this 作用域，是 pure function。 * @param onDelFn * @param products * @returns {XML} * @constructor */ const ProductList = ({onDelFn, products}) => { const columns = [ // 表格的列 { title: "ID", dataIndex: "id" }, { title: "Name", dataIndex: "name" }, { title: "Actions", render: (text, record) => { return ( { onDelFn(record.id) }}> ) } } ] return () } ProductList.propTypes = { onDelFn: PropTypes.func.isRequired, products: PropTypes.array.isRequired } // 記得導出哦！ export default ProductList; #定義 Model

完成 UI 后，現在開始處理數據和邏輯。

dva 通過 model 的概念把一個領域的模型管理起來，包含同步更新 state 的 reducers，處理異步邏輯的 effects，訂閱數據源的 subscriptions 。

新建 model?models/products.js?：

export default {
  namespace: "products",
  state: [],
  reducers: {
    "delete"(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

這個 model 里：

namespace?表示在全局 state 上的 key

state?是初始值，在這里是空數組

reducers?等同于 redux 里的 reducer，接收 action，同步更新 state

然后別忘記在?index.js?里載入他：

// 3. Model
+ app.model(require("./models/products").default);

#connect 起來

到這里，我們已經多帶帶完成了 model 和 component，那么他們如何串聯起來呢?

dva 提供了 connect 方法。如果你熟悉 redux，這個 connect 就是 react-redux 的 connect 。

編輯?routes/Products.js，替換為以下內容：

import React from "react";
import { connect } from "dva";
import ProductList from "../components/ProductList";

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: "products/delete",
      payload: id,
    });
  }
  return (
    
      List of Products
      
    
  );
};

// export default Products;
export default connect(({ products }) => ({
  products,
}))(Products);

最后，我們還需要一些初始數據讓這個應用 run 起來。編輯?index.js：

- const app = dva();
+ const app = dva({
+   initialState: {
+     products: [
+       { name: "dva", id: 1 },
+       { name: "antd", id: 2 },
+     ],
+   },
+ });

刷新瀏覽器，應該能看到以下效果：

#構建應用

完成開發并且在開發環境驗證之后，就需要部署給我們的用戶了。先執行下面的命令：

$ npm run build

幾秒后，輸出應該如下：

> @ build /private/tmp/myapp
> roadhog build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  82.98 KB  dist/index.js
  270 B     dist/index.css

build?命令會打包所有的資源，包含 JavaScript, CSS, web fonts, images, html 等。然后你可以在?dist/?目錄下找到這些文件。

Dva 概念 #數據流向

數據的改變發生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉等）觸發的，當此類行為會改變數據的時候可以通過?dispatch?發起一個 action，如果是同步行為會直接通過?Reducers?改變?State，如果是異步行為（副作用）會先觸發?Effects?然后流向?Reducers?最終改變?State，所以在 dva 中，數據流向非常清晰簡明，并且思路基本跟開源社區保持一致（也是來自于開源社區）。

#Models #State

type State = any

State 表示 Model 的狀態數據，通常表現為一個 javascript 對象（當然它可以是任何值）；操作的時候每次都要當作不可變數據（immutable data）來對待，保證每次都是全新對象，沒有引用關系，這樣才能保證 State 的獨立性，便于測試和追蹤變化。

在 dva 中你可以通過 dva 的實例屬性?_store?看到頂部的 state 數據，但是通常你很少會用到:

const app = dva();
console.log(app._store); // 頂部的 state 數據

#Action

type AsyncAction = any

Action 是一個普通 javascript 對象，它是改變 State 的唯一途徑。無論是從 UI 事件、網絡回調，還是 WebSocket 等數據源所獲得的數據，最終都會通過 dispatch 函數調用一個 action，從而改變對應的數據。action 必須帶有?type?屬性指明具體的行為，其它字段可以自定義，如果要發起一個 action 需要使用?dispatch?函數；需要注意的是?dispatch?是在組件 connect Models以后，通過 props 傳入的。

dispatch({
  type: "add",
});

#dispatch 函數

type dispatch = (a: Action) => Action

dispatching function 是一個用于觸發 action 的函數，action 是改變 State 的唯一途徑，但是它只描述了一個行為，而 dipatch 可以看作是觸發這個行為的方式，而 Reducer 則是描述如何改變數據的。

在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，可以調用 Model 中的 Reducer 或者 Effects，常見的形式如：

dispatch({
  type: "user/add", // 如果在 model 外調用，需要添加 namespace
  payload: {}, // 需要傳遞的信息
});

#Reducer

type Reducer = (state: S, action: A) => S

Reducer（也稱為 reducing function）函數接受兩個參數：之前已經累積運算的結果和當前要被累積的值，返回的是一個新的累積結果。該函數把一個集合歸并成一個單值。

Reducer 的概念來自于是函數式編程，很多語言中都有 reduce API。如在 javascript 中：

[{x:1},{y:2},{z:3}].reduce(function(prev, next){
    return Object.assign(prev, next);
})
//return {x:1, y:2, z:3}

在 dva 中，reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值，與當前 reducers 中的值進行運算獲得新的值（也就是新的 state）。需要注意的是 Reducer 必須是純函數，所以同樣的輸入必然得到同樣的輸出，它們不應該產生任何副作用。并且，每一次的計算都應該使用immutable data，這種特性簡單理解就是每次操作都是返回一個全新的數據（獨立，純凈），所以熱重載和時間旅行這些功能才能夠使用。

#Effect

Effect 被稱為副作用，在我們的應用中，最常見的就是異步操作。它來自于函數編程的概念，之所以叫副作用是因為它使得我們的函數變得不純，同樣的輸入不一定獲得同樣的輸出。

dva 為了控制副作用的操作，底層引入了redux-sagas做異步流程控制，由于采用了generator的相關概念，所以將異步轉成同步寫法，從而將effects轉為純函數。至于為什么我們這么糾結于?純函數，如果你想了解更多可以閱讀Mostly adequate guide to FP，或者它的中文譯本JS函數式編程指南。

#Subscription

Subscriptions 是一種從?源?獲取數據的方法，它來自于 elm。

Subscription 語義是訂閱，用于訂閱一個數據源，然后根據條件 dispatch 需要的 action。數據源可以是當前的時間、服務器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。

import key from "keymaster";
...
app.model({
  namespace: "count",
  subscriptions: {
    keyEvent({dispatch}) {
      key("?+up, ctrl+up", () => { dispatch({type:"add"}) });
    },
  }
});

#Router

這里的路由通常指的是前端路由，由于我們的應用現在通常是單頁應用，所以需要前端代碼來控制路由邏輯，通過瀏覽器提供的?History API?可以監聽瀏覽器url的變化，從而控制路由相關操作。

dva 實例提供了 router 方法來控制路由，使用的是react-router。

import { Router, Route } from "dva/router";
app.router(({history}) =>
  
    
  
);

#Route Components

在組件設計方法中，我們提到過 Container Components，在 dva 中我們通常將其約束為 Route Components，因為在 dva 中我們通常以頁面維度來設計 Container Components。

所以在 dva 中，通常需要 connect Model的組件都是 Route Components，組織在/routes/目錄下，而/components/目錄下則是純組件（Presentational Components）。

#參考

redux docs

redux docs 中文

Mostly adequate guide to FP

JS函數式編程指南

choo docs

elm

#例子和腳手架 #官方

Count: 簡單計數器

User Dashboard: 用戶管理

AntDesign Pro：(Demo)，開箱即用的中臺前端/設計解決方案

HackerNews: (Demo)，HackerNews Clone

antd-admin: (Demo)，基于 antd 和 dva 的后臺管理應用

github-stars: (Demo)，Github Star 管理應用

#社區

Account System: 小型庫存管理系統

react-native-dva-starter: 集成了 dva 和 react-navigation 典型應用場景的 React Native 實例

Dva 圖解

作者：至正
原文鏈接：https://yuque.com/flying.ni/the-tower/tvzasn

#示例背景

最常見的 Web 類示例之一: TodoList = Todo list + Add todo button

#圖解一: React 表示法

按照 React 官方指導意見, 如果多個 Component 之間要發生交互, 那么狀態(即: 數據)就維護在這些 Component 的最小公約父節點上, 也即是?

?以及?本身不維持任何 state, 完全由父節點?傳入 props 以決定其展現, 是一個純函數的存在形式, 即:?Pure Component

#圖解二: Redux 表示法

React 只負責頁面渲染, 而不負責頁面邏輯, 頁面邏輯可以從中多帶帶抽取出來, 變成 store

與圖一相比, 幾個明顯的改進點:

狀態及頁面邏輯從?里面抽取出來, 成為獨立的 store, 頁面邏輯就是 reducer

?及都是 Pure Component, 通過 connect 方法可以很方便地給它倆加一層 wrapper 從而建立起與 store 的聯系: 可以通過 dispatch 向 store 注入 action, 促使 store 的狀態進行變化, 同時又訂閱了 store 的狀態變化, 一旦狀態有變, 被 connect 的組件也隨之刷新

使用 dispatch 往 store 發送 action 的這個過程是可以被攔截的, 自然而然地就可以在這里增加各種 Middleware, 實現各種自定義功能, eg: logging

這樣一來, 各個部分各司其職, 耦合度更低, 復用度更高, 擴展性更好

#圖解三: 加入 Saga

上面說了, 可以使用 Middleware 攔截 action, 這樣一來異步的網絡操作也就很方便了, 做成一個 Middleware 就行了, 這里使用 redux-saga 這個類庫, 舉個栗子:

點擊創建 Todo 的按鈕, 發起一個 type == addTodo 的 action

saga 攔截這個 action, 發起 http 請求, 如果請求成功, 則繼續向 reducer 發一個 type == addTodoSucc 的 action, 提示創建成功, 反之則發送 type == addTodoFail 的 action 即可

#圖解四: Dva 表示法

有了前面的三步鋪墊, Dva 的出現也就水到渠成了, 正如 Dva 官網所言, Dva 是基于 React + Redux + Saga 的最佳實踐沉淀, 做了 3 件很重要的事情, 大大提升了編碼體驗:

把 store 及 saga 統一為一個 model 的概念, 寫在一個 js 文件里面

增加了一個 Subscriptions, 用于收集其他來源的 action, eg: 鍵盤操作

model 寫法很簡約, 類似于 DSL 或者 RoR, coding 快得飛起??

約定優于配置, 總是好的

云服務器 GPU云服務器 react-redux React_Redux_Appointm react-router-redux 前端react

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

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

React&amp;Redux中Scroll List封裝實踐

摘要：建議你盡可能地把范式化，不存在嵌套。把所有數據放到一個對象里，每個數據以為主鍵，不同數據相互引用時通過來查找。一直直在寫一個前端項目，來分享一些Scroll封裝的實踐設計目標因為項目中需要大量的類似Scroll List，ListView頁面： showImg(https://segmentfault.com/img/bVzhkN?w=440&h=881); github上看了圈...

YanceyOfficial 2019-08-21 14:03 評論0 收藏0
前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
(譯 &amp; 轉載) 2016 JavaScript 后起之秀

摘要：在年成為最大贏家，贏得了實現的風暴之戰。和他的競爭者位列第二沒有前端開發者可以忽視和它的生態系統。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發人員檢查所有端點。 2016 JavaScript 后起之秀本文轉載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 評論0 收藏0
前端學習資源

前端學習資源鏈接下面有些網站是全英文，包括我們在配置環境的過程中也是全英語，其實英文不可怕，可怕的是你害怕面對它，我在配置環境的過程中經常出錯，看到紅色error就頭疼，但也正是我的頭疼讓我白白浪費了去讀懂它的時間，只需要粘貼復制的問題：查詞典，百度都可以找到。錯誤是每一位開發者必須躺過的坑。 1. 前端學習網站和知名博客比較常用的IT網: 博客園：https://www.cnblogs.co...

neuSnail 2019-08-22 10:53 評論0 收藏0
前端學習資源

前端學習資源鏈接下面有些網站是全英文，包括我們在配置環境的過程中也是全英語，其實英文不可怕，可怕的是你害怕面對它，我在配置環境的過程中經常出錯，看到紅色error就頭疼，但也正是我的頭疼讓我白白浪費了去讀懂它的時間，只需要粘貼復制的問題：查詞典，百度都可以找到。錯誤是每一位開發者必須躺過的坑。 1. 前端學習網站和知名博客比較常用的IT網: 博客園：https://www.cnblogs.co...

URLOS 2019-08-01 17:26 評論0 收藏0