摘要：如在中在中，聚合積累的結(jié)果是當(dāng)前的對象。被稱為副作用，在我們的應(yīng)用中，最常見的就是異步操作。至于為什么我們這么糾結(jié)于純函數(shù)，如果你想了解更多可以閱讀，或者它的中文譯本函數(shù)式編程指南。
DvaJS： React and redux based, lightweight and elm-style framework.
實(shí)例項(xiàng)目源碼：https://github.com/AK-47-D/re...
隨著應(yīng)用的發(fā)展，你會需要在多個(gè)頁面分享 UI 元素 (或在一個(gè)頁面使用多次)，在 dva 里你可以把這部分抽成 component 。
)
}
ProductList.propTypes = {
onDelFn: PropTypes.func.isRequired,
products: PropTypes.array.isRequired
}
// 記得導(dǎo)出哦！
export default ProductList;
#定義 Model
完成 UI 后，現(xiàn)在開始處理數(shù)據(jù)和邏輯。
dva 通過 model 的概念把一個(gè)領(lǐng)域的模型管理起來，包含同步更新 state 的 reducers，處理異步邏輯的 effects，訂閱數(shù)據(jù)源的 subscriptions 。
新建 model?models/products.js ?：
export default {
namespace: "products",
state: [],
reducers: {
"delete"(state, { payload: id }) {
return state.filter(item => item.id !== id);
},
},
};
這個(gè) model 里：
namespace ?表示在全局 state 上的 key
state ?是初始值，在這里是空數(shù)組
reducers ?等同于 redux 里的 reducer，接收 action，同步更新 state
然后別忘記在?index.js ?里載入他：
// 3. Model
+ app.model(require("./models/products").default);
#connect 起來
到這里，我們已經(jīng)多帶帶完成了 model 和 component，那么他們?nèi)绾未?lián)起來呢?
dva 提供了 connect 方法。如果你熟悉 redux，這個(gè) connect 就是 react-redux 的 connect 。
編輯?routes/Products.js ，替換為以下內(nèi)容：
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 (
);
};
// export default Products;
export default connect(({ products }) => ({
products,
}))(Products);
最后，我們還需要一些初始數(shù)據(jù)讓這個(gè)應(yīng)用 run 起來。編輯?index.js ：
- const app = dva();
+ const app = dva({
+ initialState: {
+ products: [
+ { name: "dva", id: 1 },
+ { name: "antd", id: 2 },
+ ],
+ },
+ });
刷新瀏覽器，應(yīng)該能看到以下效果：
#構(gòu)建應(yīng)用
完成開發(fā)并且在開發(fā)環(huán)境驗(yàn)證之后，就需要部署給我們的用戶了。先執(zhí)行下面的命令：
$ npm run build
幾秒后，輸出應(yīng)該如下：
> @ 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 概念
#數(shù)據(jù)流向
數(shù)據(jù)的改變發(fā)生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉(zhuǎn)等）觸發(fā)的，當(dāng)此類行為會改變數(shù)據(jù)的時(shí)候可以通過?dispatch ?發(fā)起一個(gè) action，如果是同步行為會直接通過?Reducers ?改變?State ，如果是異步行為（副作用）會先觸發(fā)?Effects ?然后流向?Reducers ?最終改變?State ，所以在 dva 中，數(shù)據(jù)流向非常清晰簡明，并且思路基本跟開源社區(qū)保持一致（也是來自于開源社區(qū)）。
#Models
#State
type State = any
State 表示 Model 的狀態(tài)數(shù)據(jù)，通常表現(xiàn)為一個(gè) javascript 對象（當(dāng)然它可以是任何值）；操作的時(shí)候每次都要當(dāng)作不可變數(shù)據(jù)（immutable data）來對待，保證每次都是全新對象，沒有引用關(guān)系，這樣才能保證 State 的獨(dú)立性，便于測試和追蹤變化。
在 dva 中你可以通過 dva 的實(shí)例屬性?_store ?看到頂部的 state 數(shù)據(jù)，但是通常你很少會用到:
const app = dva();
console.log(app._store); // 頂部的 state 數(shù)據(jù)
#Action
type AsyncAction = any
Action 是一個(gè)普通 javascript 對象，它是改變 State 的唯一途徑。無論是從 UI 事件、網(wǎng)絡(luò)回調(diào)，還是 WebSocket 等數(shù)據(jù)源所獲得的數(shù)據(jù)，最終都會通過 dispatch 函數(shù)調(diào)用一個(gè) action，從而改變對應(yīng)的數(shù)據(jù)。action 必須帶有?type ?屬性指明具體的行為，其它字段可以自定義，如果要發(fā)起一個(gè) action 需要使用?dispatch ?函數(shù)；需要注意的是?dispatch ?是在組件 connect Models以后，通過 props 傳入的。
dispatch({
type: "add",
});
#dispatch 函數(shù)
type dispatch = (a: Action) => Action
dispatching function 是一個(gè)用于觸發(fā) action 的函數(shù)，action 是改變 State 的唯一途徑，但是它只描述了一個(gè)行為，而 dipatch 可以看作是觸發(fā)這個(gè)行為的方式，而 Reducer 則是描述如何改變數(shù)據(jù)的。
在 dva 中，connect Model 的組件通過 props 可以訪問到 dispatch，可以調(diào)用 Model 中的 Reducer 或者 Effects，常見的形式如：
dispatch({
type: "user/add", // 如果在 model 外調(diào)用，需要添加 namespace
payload: {}, // 需要傳遞的信息
});
#Reducer
type Reducer = (state: S, action: A) => S
Reducer（也稱為 reducing function）函數(shù)接受兩個(gè)參數(shù)：之前已經(jīng)累積運(yùn)算的結(jié)果和當(dāng)前要被累積的值，返回的是一個(gè)新的累積結(jié)果。該函數(shù)把一個(gè)集合歸并成一個(gè)單值。
Reducer 的概念來自于是函數(shù)式編程，很多語言中都有 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 聚合積累的結(jié)果是當(dāng)前 model 的 state 對象。通過 actions 中傳入的值，與當(dāng)前 reducers 中的值進(jìn)行運(yùn)算獲得新的值（也就是新的 state）。需要注意的是 Reducer 必須是純函數(shù)，所以同樣的輸入必然得到同樣的輸出，它們不應(yīng)該產(chǎn)生任何副作用。并且，每一次的計(jì)算都應(yīng)該使用immutable data，這種特性簡單理解就是每次操作都是返回一個(gè)全新的數(shù)據(jù)（獨(dú)立，純凈），所以熱重載和時(shí)間旅行這些功能才能夠使用。
#Effect
Effect 被稱為副作用，在我們的應(yīng)用中，最常見的就是異步操作。它來自于函數(shù)編程的概念，之所以叫副作用是因?yàn)樗沟梦覀兊暮瘮?shù)變得不純，同樣的輸入不一定獲得同樣的輸出。
dva 為了控制副作用的操作，底層引入了redux-sagas做異步流程控制，由于采用了generator的相關(guān)概念，所以將異步轉(zhuǎn)成同步寫法，從而將effects轉(zhuǎn)為純函數(shù)。至于為什么我們這么糾結(jié)于?純函數(shù) ，如果你想了解更多可以閱讀Mostly adequate guide to FP，或者它的中文譯本JS函數(shù)式編程指南。
#Subscription
Subscriptions 是一種從?源 ?獲取數(shù)據(jù)的方法，它來自于 elm。
Subscription 語義是訂閱，用于訂閱一個(gè)數(shù)據(jù)源，然后根據(jù)條件 dispatch 需要的 action。數(shù)據(jù)源可以是當(dāng)前的時(shí)間、服務(wù)器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。
import key from "keymaster";
...
app.model({
namespace: "count",
subscriptions: {
keyEvent({dispatch}) {
key("?+up, ctrl+up", () => { dispatch({type:"add"}) });
},
}
});
#Router
這里的路由通常指的是前端路由，由于我們的應(yīng)用現(xiàn)在通常是單頁應(yīng)用，所以需要前端代碼來控制路由邏輯，通過瀏覽器提供的?History API?可以監(jiān)聽瀏覽器url的變化，從而控制路由相關(guān)操作。
dva 實(shí)例提供了 router 方法來控制路由，使用的是react-router。
import { Router, Route } from "dva/router";
app.router(({history}) =>
);
#Route Components
在組件設(shè)計(jì)方法中，我們提到過 Container Components，在 dva 中我們通常將其約束為 Route Components，因?yàn)樵?dva 中我們通常以頁面維度來設(shè)計(jì) Container Components。
所以在 dva 中，通常需要 connect Model的組件都是 Route Components，組織在/routes/ 目錄下，而/components/ 目錄下則是純組件（Presentational Components）。
#參考
redux docs
redux docs 中文
Mostly adequate guide to FP
JS函數(shù)式編程指南
choo docs
elm
#例子和腳手架
#官方
Count: 簡單計(jì)數(shù)器
User Dashboard: 用戶管理
AntDesign Pro：(Demo)，開箱即用的中臺前端/設(shè)計(jì)解決方案
HackerNews: (Demo)，HackerNews Clone
antd-admin: (Demo)，基于 antd 和 dva 的后臺管理應(yīng)用
github-stars: (Demo)，Github Star 管理應(yīng)用
#社區(qū)
Account System: 小型庫存管理系統(tǒng)
react-native-dva-starter: 集成了 dva 和 react-navigation 典型應(yīng)用場景的 React Native 實(shí)例
Dva 圖解
作者：至正
#示例背景
最常見的 Web 類示例之一: TodoList = Todo list + Add todo button
#圖解一: React 表示法
按照 React 官方指導(dǎo)意見, 如果多個(gè) Component 之間要發(fā)生交互, 那么狀態(tài)(即: 數(shù)據(jù))就維護(hù)在這些 Component 的最小公約父節(jié)點(diǎn)上, 也即是?
Pure Component
#圖解二: Redux 表示法
React 只負(fù)責(zé)頁面渲染, 而不負(fù)責(zé)頁面邏輯, 頁面邏輯可以從中多帶帶抽取出來, 變成 store
與圖一相比, 幾個(gè)明顯的改進(jìn)點(diǎn):
狀態(tài)及頁面邏輯從?
使用 dispatch 往 store 發(fā)送 action 的這個(gè)過程是可以被攔截的, 自然而然地就可以在這里增加各種 Middleware, 實(shí)現(xiàn)各種自定義功能, eg: logging
這樣一來, 各個(gè)部分各司其職, 耦合度更低, 復(fù)用度更高, 擴(kuò)展性更好
#圖解三: 加入 Saga
上面說了, 可以使用 Middleware 攔截 action, 這樣一來異步的網(wǎng)絡(luò)操作也就很方便了, 做成一個(gè) Middleware 就行了, 這里使用 redux-saga 這個(gè)類庫, 舉個(gè)栗子:
點(diǎn)擊創(chuàng)建 Todo 的按鈕, 發(fā)起一個(gè) type == addTodo 的 action
saga 攔截這個(gè) action, 發(fā)起 http 請求, 如果請求成功, 則繼續(xù)向 reducer 發(fā)一個(gè) type == addTodoSucc 的 action, 提示創(chuàng)建成功, 反之則發(fā)送 type == addTodoFail 的 action 即可
#圖解四: Dva 表示法
有了前面的三步鋪墊, Dva 的出現(xiàn)也就水到渠成了, 正如 Dva 官網(wǎng)所言, Dva 是基于 React + Redux + Saga 的最佳實(shí)踐沉淀, 做了 3 件很重要的事情, 大大提升了編碼體驗(yàn):
把 store 及 saga 統(tǒng)一為一個(gè) model 的概念, 寫在一個(gè) js 文件里面
增加了一個(gè) Subscriptions, 用于收集其他來源的 action, eg: 鍵盤操作
model 寫法很簡約, 類似于 DSL 或者 RoR, coding 快得飛起??
約定優(yōu)于配置, 總是好的
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99271.html
摘要：建議你盡可能地把范式化，不存在嵌套。把所有數(shù)據(jù)放到一個(gè)對象里，每個(gè)數(shù)據(jù)以為主鍵，不同數(shù)據(jù)相互引用時(shí)通過來查找。
一直直在寫一個(gè)前端項(xiàng)目，來分享一些Scroll封裝的實(shí)踐
設(shè)計(jì)目標(biāo)
因?yàn)轫?xiàng)目中需要大量的類似Scroll List，ListView頁面：
showImg(https://segmentfault.com/img/bVzhkN?w=440&h=881);
github上看了圈...
摘要：特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。
特意對前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。
本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯誤的地方，還請斧正...
托管: welcome to git，歡迎交流，感謝star
有好友反應(yīng)和斧正，會及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會不定期更...
摘要：在年成為最大贏家，贏得了實(shí)現(xiàn)的風(fēng)暴之戰(zhàn)。和他的競爭者位列第二沒有前端開發(fā)者可以忽視和它的生態(tài)系統(tǒng)。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發(fā)人員檢查所有端點(diǎn)。
2016 JavaScript 后起之秀
本文轉(zhuǎn)載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...
darry 2019-08-20 14:04
評論0
前端學(xué)習(xí)資源鏈接
下面有些網(wǎng)站是全英文，包括我們在配置環(huán)境的過程中也是全英語，其實(shí)英文不可怕，可怕的是你害怕面對它，我在配置環(huán)境的過程中經(jīng)常出錯，看到紅色error就頭疼，但也正是我的頭疼讓我白白浪費(fèi)了去讀懂它的時(shí)間，只需要粘貼復(fù)制的問題：查詞典，百度都可以找到。錯誤是每一位開發(fā)者必須躺過的坑。
1. 前端學(xué)習(xí)網(wǎng)站和知名博客
比較常用的IT網(wǎng):
博客園：https://www.cnblogs.co...
前端學(xué)習(xí)資源鏈接
下面有些網(wǎng)站是全英文，包括我們在配置環(huán)境的過程中也是全英語，其實(shí)英文不可怕，可怕的是你害怕面對它，我在配置環(huán)境的過程中經(jīng)常出錯，看到紅色error就頭疼，但也正是我的頭疼讓我白白浪費(fèi)了去讀懂它的時(shí)間，只需要粘貼復(fù)制的問題：查詞典，百度都可以找到。錯誤是每一位開發(fā)者必須躺過的坑。
1. 前端學(xué)習(xí)網(wǎng)站和知名博客
比較常用的IT網(wǎng):
博客園：https://www.cnblogs.co...
URLOS 2019-08-01 17:26
評論0
男| 高級講師
閱讀 1805· 2021-11-18 13:20
閱讀 1182· 2021-10-11 10:59
閱讀 3019· 2021-08-24 10:01
閱讀 3527· 2019-08-29 14:21
閱讀 3401· 2019-08-29 14:15
閱讀 3545· 2019-08-26 12:23
閱讀 3367· 2019-08-26 11:46
閱讀 3377· 2019-08-26 11:35
