快速複習 Flux 和 Redux

栏目: IOS · Android · 发布时间: 6年前

内容简介:使用 3 者搭配

Flux 就是一個設計模式,用於管理資料傳遞流程。其核心概念為單一方向性的資料流 。

Flux 由下列 3 個角色組成:

  • Dispatcher:接收 action 然後發送給 store ,每一個有使用 dispatcher 註冊的 store 都會收到 action 。一個應用程式只會有一個 dispatcher

    例如:

    1. 使用者輸入代辦項目然後點擊 Enter
    2. React 擷取事件之後發送一個 ADD_TODO action (dispatch an action) 這個 action 包含代辦項目的文字資料
    3. 接著,每一個 store 都會收到這個 action
  • Store:負責管理資料。 strore 需要向 dispatcher 註冊,才能夠收到 action 。儲存在 store 中的資料只能夠依據 action 變更。變更之後必須要發送一個 change 的事件

    例如:

    1. store 收到 ADD_TODO action
    2. store 內部自行將 action 中的資料加入清單中
    3. store 更新完代辦清單之後 emit 一個 change event
  • Action:定義應用程式內部行為。使用一個物件描述將產生的變更行為與資料( payload

    例如:

    1. 使用者點擊刪除,則發生一個 DELETE_TODO action

      {
        type: 'DELETE_TODO',
        id: '12'
      }

使用 3 者搭配 View(React) 來開發 Client-Side 網頁應用程式。

快速複習 Flux 和 Redux

See the Pen oQNzjx by andyyou ( @andyyou ) on CodePen .

Redux

Redux 是給 JavaScript 應用程式使用的一種 狀態管理容器

使用 createStore 建立一個全應用程式唯一的 storestore 須使用 reducerPure Function )來變更內部的 state

執行狀態變更須發送 actionstore.dispatch(action) ),一個 action 只是一個單純的物件須包含 type 屬性用來描述變更行為,對應的行為在 reducer 中實現。

搭配 React 使用時要將 store 注入,可使用 react-redux 的 其他子元件要取得 state 或 dispatch 則使用 High-Order Component 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 變更的計算過程稱為 reducerreducer 為一函式接收 actionstate 回傳一個新的計算後的 state

    const todos = function(state, action) {
      switch(action.type) {
        case 'ADD_TODO':
          return [
            ...state,
            action.text,
          ];
        default:
          return state;
      }
    }

See the Pen rQNRVY by andyyou ( @andyyou ) on CodePen .


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序设计基础

程序设计基础

谢书良 / 2010-5 / 29.50元

《程序设计基础》是为从来没有接触过程序设计的读者编写的“零起点”入门教材。全书共分8章,第1章主要介绍程序设计的概念和程序运行的环境,第2章介绍了基本的数据类型、运算符与表达式,第3章介绍面向过程程序的顺序、分支选择和循环三种控制结构,第4章至第7章分别介绍了数组、指针的概念,结构体和其他数据类型,函数及其调用,内容涵盖了C++面向过程程序设计内容,与C语言教材完全兼容。第8章是体现《程序设计基础......一起来看看 《程序设计基础》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具