内容简介:使用 3 者搭配
Flux 就是一個設計模式,用於管理資料傳遞流程。其核心概念為單一方向性的資料流 。
Flux 由下列 3 個角色組成:
-
Dispatcher:接收 action 然後發送給 store ,每一個有使用 dispatcher 註冊的 store 都會收到 action 。一個應用程式只會有一個 dispatcher 。
例如:
- 使用者輸入代辦項目然後點擊 Enter
- React 擷取事件之後發送一個
ADD_TODOaction (dispatch an action) 這個 action 包含代辦項目的文字資料 - 接著,每一個 store 都會收到這個 action
-
Store:負責管理資料。 strore 需要向 dispatcher 註冊,才能夠收到 action 。儲存在 store 中的資料只能夠依據 action 變更。變更之後必須要發送一個
change的事件例如:
- store 收到
ADD_TODOaction - store 內部自行將 action 中的資料加入清單中
- store 更新完代辦清單之後 emit 一個 change event
- store 收到
-
Action:定義應用程式內部行為。使用一個物件描述將產生的變更行為與資料( payload )
例如:
-
使用者點擊刪除,則發生一個
DELETE_TODOaction{ type: 'DELETE_TODO', id: '12' }
-
使用 3 者搭配 View(React) 來開發 Client-Side 網頁應用程式。
See the Pen oQNzjx by andyyou ( @andyyou ) on CodePen .
Redux
Redux 是給 JavaScript 應用程式使用的一種 狀態管理容器 。
使用 createStore 建立一個全應用程式唯一的 store , store 須使用 reducer ( Pure Function )來變更內部的 state 。
執行狀態變更須發送 action ( store.dispatch(action) ),一個 action 只是一個單純的物件須包含 type 屬性用來描述變更行為,對應的行為在 reducer 中實現。
搭配 React 使用時要將 store 注入,可使用 react-redux 的
connect
Redux 由下列幾個單元組成:
-
Store:整個應用程式只有一個 Store
import { createStore } from 'redux'; const store = createStore(reducer); // 取得狀態 store.getState(); // 訂閱 let unsubscribe = store.subscribe(() => { console.log(store.getState()); }); // 解除 unsubscribe(); -
Action: action 是一個單純的物件,須包含
type屬性。要變更 state 必須要發送 action 。const action = { type: 'ADD_TODO', text: 'Learn Redux', }; // 發送 action 的方式 store.dispatch(action); -
Reducer:發送了 action 之後,須變更 state ,使 state 變更的計算過程稱為 reducer 。 reducer 為一函式接收 action 和 state 回傳一個新的計算後的 state 。
const todos = function(state, action) { switch(action.type) { case 'ADD_TODO': return [ ...state, action.text, ]; default: return state; } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java程序设计
宋中山 严千钧 等编 / 清华大学出版社 / 2005-8 / 27.00元
本书全面、系统地介绍了Java语言的基本概念、基本语法和编程方法。主要内容包括:Java语言概述、数据类型与运算符、流程控制语句、类与对象、继承与多态、异常处理、工具类和算法、Applet小应用程序、图形用户界面、输入和输出、Java多线程以及Java高级编程。每章后面附有习题,读者可参考使用。 本书内容丰富,结构合理,语言简洁,深入浅出,通俗易懂。基础知识与程序实例相结合,示例典型......一起来看看 《Java程序设计》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
html转js在线工具
html转js在线工具