dva.js學習梳理集

不知大家學 react 或 dva 時會不會有這樣的疑惑：

• es6 特性那麼多，我需要全部學會嗎?
• react component 有 3 種寫法，我需要全部學會嗎?
• reducer 的增刪改應該怎麼寫?
• 怎麼做全域性/區域性的錯誤處理?
• 怎麼發非同步請求?
• 怎麼處理複雜的非同步業務邏輯?
• 怎麼配置路由?
• …

這篇文件梳理了基於dva-cli使用dva的最小知識集，讓你可以用最少的時間掌握建立類似dva-hackernews的全部知識，並且不需要掌握額外的冗餘知識。

目錄：

• JavaScript 語言
  • 變數宣告
    • const 和 let
    • 模板字串
    • 預設引數
  • 箭頭函式
  • 模組的 Import 和 Export
  • ES6 物件和陣列
    • 析構賦值
    • 物件字面量改進
    • Spread Operator
  • Promises
  • Generators
• React Component
  • Stateless Functional Components
  • JSX
    • Component 巢狀
    • className
    • JavaScript 表示式
    • Mapping Arrays to JSX
    • 註釋
    • Spread Attributes
  • Props
    • propTypes
    • 往下傳資料
    • 往上傳資料
  • CSS Modules
    • 理解 CSS Modules
    • 定義全域性 CSS
    • classnames Package
• Reducer
  • 增刪改
  • 巢狀資料的增刪改
• Effect
  • Effects
    • put
    • call
    • select
  • 錯誤處理
    • 全域性錯誤處理
    • 本地錯誤處理
  • 非同步請求
    • GET 和 POST
    • 統一錯誤處理
• Subscription
  • 非同步資料初始化
    • path-to-regexp Package
• Router
  • Config with JSX Element (router.js)
  • Route Components
    • 通過 connect 繫結資料
    • Injected Props (e.g. location)
  • 基於 action 進行頁面跳轉
• dva 配置
  • Redux Middleware
  • history
    • 切換 history 為 browserHistory
    • 去除 hashHistory 下的 _k 查詢引數
• 工具
  • 通過 dva-cli 建立專案

JavaScript 語言

變數宣告

const 和 let

不要用var，而是用const和let，分別表示常量和變數。不同於var的函式作用域，const和let都是塊級作用域。

const DELAY = 1000;

let count = 0;
count = count + 1;

模板字串

模板字串提供了另一種做字串組合的方法。

const user = `world`;
console.log(`hello ${user}`);  // hello world

// 多行
const content = `
  Hello ${firstName},
  Thanks for ordering ${qty} tickets to ${event}.
`;

預設引數

function logActivity(activity = `skiing`) {
  console.log(activity);
}

logActivity();  // skiing

箭頭函式

函式的快捷寫法，不需要通過function關鍵字建立函式，並且還可以省略return關鍵字。同時，箭頭函式還會繼承當前上下文的this關鍵字。

比如：

[1, 2, 3].map(x => x + 1);  // [2, 3, 4]

等同於：

[1, 2, 3].map((function(x) {
  return x + 1;
}).bind(this));

模組的 Import 和 Export

import用於引入模組，export用於匯出模組。

比如：

// 引入全部
import dva from `dva`;

// 引入部分
import { connect } from `dva`;
import { Link, Route } from `dva/router`;

// 引入全部並作為 github 物件
import * as github from `./services/github`;

// 匯出預設
export default App;
// 部分匯出，需 import { App } from `./file`; 引入
export class App extend Component {};

ES6 物件和陣列

析構賦值

析構賦值讓我們從 Object 或 Array 裡取部分資料存為變數。

// 物件
const user = { name: `guanguan`, age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`);  // guanguan : 2

// 陣列
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo);  // 1

我們也可以析構傳入的函式引數。

const add = (state, { payload }) => {
  return state.concat(payload);
};

析構時還可以配 alias，讓程式碼更具有語義。

const add = (state, { payload: todo }) => {
  return state.concat(todo);
};

物件字面量改進

這是析構的反向操作，用於重新組織一個 Object 。

const name = `duoduo`;
const age = 8;

const user = { name, age };  // { name: `duoduo`, age: 8 }

定義物件方法時，還可以省去function關鍵字。

app.model({
  reducers: {
    add() {}  // 等同於 add: function() {}
  },
  effects: {
    *addRemote() {}  // 等同於 addRemote: function*() {}
  },
});

Spread Operator

Spread Operator 即 3 個點...，有幾種不同的使用方法。
可用於組裝陣列。

const todos = [`Learn dva`];
[...todos, `Learn antd`];  // [`Learn dva`, `Learn antd`]

也可用於獲取陣列的部分項。

const arr = [`a`, `b`, `c`];
const [first, ...rest] = arr;
rest;  // [`b`, `c`]

// With ignore
const [first, , ...rest] = arr;
rest;  // [`c`]

還可收集函式引數為陣列。

function directions(first, ...rest) {
  console.log(rest);
}
directions(`a`, `b`, `c`);  // [`b`, `c`];

代替 apply。

function foo(x, y, z) {}
const args = [1,2,3];

// 下面兩句效果相同
foo.apply(null, args);
foo(...args);

對於 Object 而言，用於組合成新的 Object 。(ES2017 stage-2 proposal)

const foo = {
  a: 1,
  b: 2,
};
const bar = {
  b: 3,
  c: 2,
};
const d = 4;

const ret = { ...foo, ...bar, d };  // { a:1, b:3, c:2, d:4 }

此外，在 JSX 中 Spread Operator 還可用於擴充套件 props，
詳見SpreadAttributes。

Promises

Promise 用於更優雅地處理非同步請求。比如發起非同步請求：

fetch(`/api/todos`)
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

定義 Promise 。

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log(`executed`);
});

Generators

dva 的 effects 是通過 generator 組織的。Generator 返回的是迭代器，通過yield關鍵字實現暫停功能。這是一個典型的 dva effect，通yield把非同步邏輯通過同步的方式組織起來。

app.model({
  namespace: `todos`,
  effects: {
    *addRemote({ payload: todo }, { put, call }) {
      yield call(addTodo, todo);
      yield put({ type: `add`, payload: todo });
    },
  },
});

React Component

Stateless Functional Components

React Component 有 3 種定義方式，分別是React.createClass,class和
Stateless Functional Component。推薦儘量使用最後一種，保持簡潔和無狀態。這是函式，不是 Object，沒有this作用域，是 pure function。
比如定義 App Component 。

function App(props) {
  function handleClick() {
    props.dispatch({ type: `app/create` });
  }
  return <div onClick={handleClick}>${props.name}</div>
}

等同於：

class App extends React.Component {
  handleClick() {
    this.props.dispatch({ type: `app/create` });
  }
  render() {
    return <div onClick={this.handleClick.bind(this)}>${this.props.name}</div>
  }
}

JSX

Component 巢狀

類似 HTML，JSX 裡可以給元件新增子元件。

<App>
  <Header />
  <MainContent />
  <Footer />
</App>

className

class是保留詞，所以新增樣式時，需用className代替class。

<h1 className="fancy">Hello dva</h1>

JavaScript 表示式

JavaScript 表示式需要用{}括起來，會執行並返回結果。

比如：

<h1>{ this.props.title }</h1>

Mapping Arrays to JSX

可以把陣列對映為 JSX 元素列表。

<ul>
  { this.props.todos.map((todo, i) => <li key={i}>{todo}</li>) }
</ul>

註釋

儘量別用//做單行註釋。

<h1>
  {/* multiline comment */}
  {/*
    multi
    line
    comment
    */}
  {
    // single line
  }
  Hello
</h1>

Spread Attributes

這是 JSX 從 ECMAScript6 借鑑過來的很有用的特性，用於擴充元件 props 。

比如：

const attrs = {
  href: `http://example.org`,
  target: `_blank`,
};
<a {...attrs}>Hello</a>

等同於

const attrs = {
  href: `http://example.org`,
  target: `_blank`,
};
<a href={attrs.href} target={attrs.target}>Hello</a>

Props

資料處理在 React 中是非常重要的概念之一，分別可以通過 props, state 和 context 來處理資料。而在 dva 應用裡，你只需關心 props 。

propTypes

JavaScript 是弱型別語言，所以請儘量宣告 propTypes 對 props 進行校驗，以減少不必要的問題。

function App(props) {
  return <div>{props.name}</div>;
}
App.propTypes = {
  name: React.PropTypes.string.isRequired,
};

內建的 prop type 有：

• PropTypes.array
• PropTypes.bool
• PropTypes.func
• PropTypes.number
• PropTypes.object
• PropTypes.string

往下傳資料

往上傳資料

CSS Modules

理解 CSS Modules

一張圖理解 CSS Modules 的工作原理：

button class 在構建之後會被重新命名為ProductList_button_1FU0u。button是 local name，而ProductList_button_1FU0u是 global name 。你可以用簡短的描述性名字，而不需要關心命名衝突問題。

然後你要做的全部事情就是在 css/less 檔案裡寫.button {...}，並在元件裡通過styles.button來引用他。

定義全域性 CSS

CSS Modules 預設是區域性作用域的，想要宣告一個全域性規則，可用:global語法。

比如：

.title {
  color: red;
}
:global(.title) {
  color: green;
}

然後在引用的時候：

<App className={styles.title} /> // red
<App className="title" />        // green

classnames Package

在一些複雜的場景中，一個元素可能對應多個 className，而每個 className 又基於一些條件來決定是否出現。這時，classnames這個庫就非常有用。

import classnames from `classnames`;
const App = (props) => {
  const cls = classnames({
    btn: true,
    btnLarge: props.type === `submit`,
    btnSmall: props.type === `edit`,
  });
  return <div className={ cls } />;
}

這樣，傳入不同的 type 給 App 元件，就會返回不同的 className 組合：

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

Reducer

reducer 是一個函式，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state

增刪改

以 todos 為例。

app.model({
  namespace: `todos`,
  state: [],
  reducers: {
    add(state, { payload: todo }) {
      return state.concat(todo);
    },
    remove(state, { payload: id }) {
      return state.filter(todo => todo.id !== id);
    },
    update(state, { payload: updatedTodo }) {
      return state.map(todo => {
        if (todo.id === updatedTodo.id) {
          return { ...todo, ...updatedTodo };
        } else {
          return todo;
        }
      });
    },
  },
};

巢狀資料的增刪改

建議最多一層巢狀，以保持 state 的扁平化，深層巢狀會讓 reducer 很難寫和難以維護。

app.model({
  namespace: `app`,
  state: {
    todos: [],
    loading: false,
  },
  reducers: {
    add(state, { payload: todo }) {
      const todos = state.todos.concat(todo);
      return { ...state, todos };
    },
  },
});

下面是深層巢狀的例子，應儘量避免。

app.model({
  namespace: `app`,
  state: {
    a: {
      b: {
        todos: [],
        loading: false,
      },
    },
  },
  reducers: {
    add(state, { payload: todo }) {
      const todos = state.a.b.todos.concat(todo);
      const b = { ...state.a.b, todos };
      const a = { ...state.a, b };
      return { ...state, a };
    },
  },
});

Effect

示例：

app.model({
  namespace: `todos`,
  effects: {
    *addRemote({ payload: todo }, { put, call }) {
      yield call(addTodo, todo);
      yield put({ type: `add`, payload: todo });
    },
  },
});

Effects

put

用於觸發 action 。

yield put({ type: `todos/add`, payload: `Learn Dva` });

call

用於呼叫非同步邏輯，支援 promise 。

const result = yield call(fetch, `/todos`);

select

用於從 state 裡獲取資料。

const todos = yield select(state => state.todos);

錯誤處理

全域性錯誤處理

dva 裡，effects 和 subscriptions 的拋錯全部會走onError hook，所以可以在onError裡統一處理錯誤。

const app = dva({
  onError(e, dispatch) {
    console.log(e.message);
  },
});

然後 effects 裡的拋錯和 reject 的 promise 就都會被捕獲到了。

本地錯誤處理

如果需要對某些 effects 的錯誤進行特殊處理，需要在 effect 內部加try catch。

app.model({
  effects: {
    *addRemote() {
      try {
        // Your Code Here
      } catch(e) {
        console.log(e.message);
      }
    },
  },
});

非同步請求

非同步請求基於 whatwg-fetch，API 詳見：https://github.com/github/fetch

GET 和 POST

import request from `../util/request`;

// GET
request(`/api/todos`);

// POST
request(`/api/todos`, {
  method: `POST`,
  body: JSON.stringify({ a: 1 }),
});

統一錯誤處理

加入約定後臺返回以下格式時，做統一的錯誤處理。

{
  status: `error`,
  message: ``,
}

編輯

utils/request.js，加入以下中介軟體：

function parseErrorMessage({ data }) {
  const { status, message } = data;
  if (status === `error`) {
    throw new Error(message);
  }
  return { data };
}

然後，這類錯誤就會走到onErrorhook 裡。

Subscription

subscriptions

是訂閱，用於訂閱一個資料來源，然後根據需要 dispatch 相應的 action。資料來源可以是當前的時間、伺服器的 websocket 連線、keyboard 輸入、geolocation 變化、history 路由變化等等。格式為({ dispatch, history }) => unsubscribe

非同步資料初始化

比如：當使用者進入/users頁面時，觸發 actionusers/fetch載入使用者資料。

app.model({
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen(({ pathname }) => {
        if (pathname === `/users`) {
          dispatch({
            type: `users/fetch`,
          });
        }
      });
    },
  },
});

path-to-regexp Package

如果 url 規則比較複雜，比如/users/:userId/search，那麼匹配和 userId 的獲取都會比較麻煩。這是推薦用path-to-regexp簡化這部分邏輯。

import pathToRegexp from `path-to-regexp`;

// in subscription
const match = pathToRegexp(`/users/:userId/search`).exec(pathname);
if (match) {
  const userId = match[1];
  // dispatch action with userId
}

Router

Config with JSX Element (router.js)

<Route path="/" component={App}>
  <Route path="accounts" component={Accounts}/>
  <Route path="statements" component={Statements}/>
</Route>

詳見：react-router

Route Components

Route Components 是指./src/routes/目錄下的檔案，他們是./src/router.js
裡匹配的 Component。

通過 connect 繫結資料

比如：

import { connect } from `dva`;
function App() {}

function mapStateToProps(state, ownProps) {
  return {
    users: state.users,
  };
}
export default connect(mapStateToProps)(App);

然後在 App 裡就有了dispatch和users兩個屬性。

Injected Props (e.g. location)

Route Component 會有額外的 props 用以獲取路由資訊。

• location
• params
• children

更多詳見：react-router

基於 action 進行頁面跳轉

import { routerRedux } from `dva/router`;

// Inside Effects
yield put(routerRedux.push(`/logout`));

// Outside Effects
dispatch(routerRedux.push(`/logout`));

// With query
routerRedux.push({
  pathname: `/logout`,
  query: {
    page: 2,
  },
});

除push(location)外還有更多方法，詳見react-router-redux

dva 配置

Redux Middleware

比如要新增 redux-logger 中介軟體：

import createLogger from `redux-logger`;
const app = dva({
  onAction: createLogger(),
});

注：onAction 支援陣列，可同時傳入多箇中介軟體。

history

切換 history 為 browserHistory

import { browserHistory } from `dva/router`;
const app = dva({
  history: browserHistory,
});

去除 hashHistory 下的 _k 查詢引數

import { useRouterHistory } from `dva/router`;
import { createHashHistory } from `history`;
const app = dva({
  history: useRouterHistory(createHashHistory)({ queryKey: false }),
});

工具

通過 dva-cli 建立專案

先安裝 dva-cli 。

$ npm install dva-cli -g

然後建立專案。

$ dva new myapp

最後，進入目錄並啟動。

$ cd myapp
$ npm start