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

時間  2019-11-06
標籤 一篇 文章 讀懂 react redux 前端 開發 欄目 React 简体版
原文   原文鏈接

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

https://dvajs.com/css

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

快速上手

#安裝 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 建立新應用。java

$ dva new dva-quickstart

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

而後咱們 cd 進入 dva-quickstart 目錄，並啓動開發服務器：react

$ cd dva-quickstart
$ npm start

幾秒鐘後，你會看到如下輸出：webpack

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 的歡迎界面。git

#使用 antd

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

$ 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) => (
  <h2>List of Products</h2>
);

export default Products;

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

+ import Products from './routes/Products';
...
+ <Route path="/products" exact component={Products} />

而後在瀏覽器裏打開 http://localhost:8000/#/products ，你應該能看到前面定義的 <h2> 標籤。

#編寫 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 (
          <Popconfirm title={'Delete?'} onConfirm={() => {
            onDelFn(record.id)
          }}>
            <Button>Delete</Button>
          </Popconfirm>
        )
      }

    }
  ]

  return (<Table dataSource={products} columns={columns}/>)
}


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 (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

// 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 },
+     ],
+   },
+ });

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

image

#構建應用

完成開發而且在開發環境驗證以後，就須要部署給咱們的用戶了。先執行下面的命令：

$ 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 中，數據流向很是清晰簡明，而且思路基本跟開源社區保持一致（也是來自於開源社區）。

image

#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<S, A> = (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}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

#Route Components

在組件設計方法中，咱們提到過 Container Components，在 dva 中咱們一般將其約束爲 Route Components，由於在 dva 中咱們一般以頁面維度來設計 Container Components。

因此在 dva 中，一般須要 connect Model的組件都是 Route Components，組織在/routes/目錄下，而/components/目錄下則是純組件（Presentational Components）。

#參考

#例子和腳手架

#官方

#社區

Dva 圖解

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

#示例背景

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

#圖解一: React 表示法

圖片.png | left | 747x518

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

<TodoList/> <Todo/> 以及<AddTodoBtn/> 自己不維持任何 state, 徹底由父節點<App/> 傳入 props 以決定其展示, 是一個純函數的存在形式, 即: Pure Component

#圖解二: Redux 表示法

React 只負責頁面渲染, 而不負責頁面邏輯, 頁面邏輯能夠從中單獨抽取出來, 變成 store

圖片.png | left | 747x558

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

  1. 狀態及頁面邏輯從 <App/>裏面抽取出來, 成爲獨立的 store, 頁面邏輯就是 reducer
  2. <TodoList/> 及<AddTodoBtn/>都是 Pure Component, 經過 connect 方法能夠很方便地給它倆加一層 wrapper 從而創建起與 store 的聯繫: 能夠經過 dispatch 向 store 注入 action, 促使 store 的狀態進行變化, 同時又訂閱了 store 的狀態變化, 一旦狀態有變, 被 connect 的組件也隨之刷新
  3. 使用 dispatch 往 store 發送 action 的這個過程是能夠被攔截的, 天然而然地就能夠在這裏增長各類 Middleware, 實現各類自定義功能, eg: logging

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

#圖解三: 加入 Saga

圖片.png | left | 747x504

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

  1. 點擊建立 Todo 的按鈕, 發起一個 type == addTodo 的 action
  2. saga 攔截這個 action, 發起 http 請求, 若是請求成功, 則繼續向 reducer 發一個 type == addTodoSucc 的 action, 提示建立成功, 反之則發送 type == addTodoFail 的 action 便可

#圖解四: Dva 表示法

圖片.png | left | 747x490

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

  1. 把 store 及 saga 統一爲一個 model 的概念, 寫在一個 js 文件裏面
  2. 增長了一個 Subscriptions, 用於收集其餘來源的 action, eg: 鍵盤操做
  3. model 寫法很簡約, 相似於 DSL 或者 RoR, coding 快得飛起✈️

約定優於配置, 老是好的😆

app.model({
  namespace: 'count',
  state: {
    record: 0,
    current: 0,
  },
  reducers: {
    add(state) {
      const newCurrent = state.current + 1;
      return { ...state,
        record: newCurrent > state.record ? newCurrent : state.record,
        current: newCurrent,
      };
    },
    minus(state) {
      return { ...state, current: state.current - 1};
    },
  },
  effects: {
    *add(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'minus' });
    },
  },
  subscriptions: {
    keyboardWatcher({ dispatch }) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  },
});

Kotlin 開發者社區

國內第一Kotlin 開發者社區公衆號，主要分享、交流 Kotlin 編程語言、Spring Boot、Android、React.js/Node.js、函數式編程、編程思想等相關主題。

開發者社區 QRCode.jpg

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程