国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

js手札--redux簡單學(xué)習(xí)[ store, action, reducer ]

wyk1184 / 3069人閱讀

摘要：簡單學(xué)習(xí)前言是一套流的處理機制?？梢哉f是真正的管理者，其他的，如是命令，是執(zhí)行命令的士兵。打印初始狀態(tài)每次更新時，打印日志注意返回一個函數(shù)用來注銷監(jiān)聽器發(fā)起一系列停止監(jiān)聽更新簡單學(xué)習(xí)二

Redux簡單學(xué)習(xí) - [ store, action, reducer ] 前言

redux是一套state流的處理機制。

主要有三要素：

store 【長官】 管理狀態(tài)，給某個士兵發(fā)命令

action 【命令】 一種長官和士兵之間溝通的方式

reducer 【士兵】 執(zhí)行命令，并反饋給長官

主要有三層數(shù)據(jù)流：

長官下達命令并把當(dāng)前任務(wù)狀態(tài)告訴士兵 =>

士兵執(zhí)行命令反饋任務(wù)狀態(tài)給長官 =>

長官更新任務(wù)狀態(tài)

1. 單一的state樹

所有狀態(tài)都在一顆唯一的state樹種

2. 要改state，只能通過Action指令

Action通過type，表明了我要修改什么東東，相當(dāng)于一個指令

{
  type: "ADD_TODO",
  text: "Build my first Redux app"
}

Action一般通過Action創(chuàng)建函數(shù)生成

// actions.js

export default function todos(type, a, b) {
  return {
    type,
    a,
    b
  }
}
3. Reducer通過action更新state 
// reducers.js

export default function todoApp(state, action) {
  switch (action.type) {
    case "add":
      return Object.assign({}, state, {
          result : action.a + action.b
      })
    case "sub":
      return Object.assign({}, state, {
          result : action.a - action.b
      })
    default:
      return state
  }
}
4.Store管理state的變化

維持應(yīng)用的 state；

提供 getState() 方法獲取 state；

提供 dispatch(action) 方法更新 state；

通過 subscribe(listener) 注冊監(jiān)聽器;

通過 subscribe(listener) 返回的函數(shù)注銷監(jiān)聽器。

可以說store是真正的state管理者，其他的，如action是命令，reducer是執(zhí)行命令的士兵。

// store.js

import { createStore } from "redux";
import { todos } from "./actions";
import { todoApp } from "./reducers.js";

let store = createStore(todoApp);

// 打印初始狀態(tài)
console.log(store.getState())

// 每次 state 更新時，打印日志
// 注意 subscribe() 返回一個函數(shù)用來注銷監(jiān)聽器
let unsubscribe = store.subscribe(() =
  console.log(store.getState())
)

// 發(fā)起一系列 action
store.dispatch(todos("add", 100, 99));
store.dispatch(todos("sub" ,100, 99));

// 停止監(jiān)聽 state 更新
unsubscribe();

redux簡單學(xué)習(xí)（二）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79542.html

相關(guān)文章

  • js手札--redux簡單學(xué)習(xí)（二）

    摘要：簡單學(xué)習(xí)二簡單學(xué)習(xí)，合并多個如有下面兩個，，換成，則為則調(diào)用時可以寫成這樣 redux簡單學(xué)習(xí)（二） redux簡單學(xué)習(xí)[ store, action, reducer ] 1. combineReducers combineReducers，合并多個reducer 如有下面兩個reducer，todoApp，textApp // reducers/todoApp.js export...

    Anleb 評論0 收藏0

  • Redux入門教程（快速上手）

    摘要：接下來演示不變性打開終端并啟動輸入。修改代碼如下我們使用在控制臺中打印出當(dāng)前的狀態(tài)。可以在控制臺中確認(rèn)新的商品已經(jīng)添加了。修改和文件最后，我們在中分發(fā)這兩個保存完代碼之后，可以在瀏覽器的控制臺中檢查修改和刪除的結(jié)果。 典型的Web應(yīng)用程序通常由共享數(shù)據(jù)的多個UI組件組成。通常，多個組件的任務(wù)是負(fù)責(zé)展示同一對象的不同屬性。這個對象表示可隨時更改的狀態(tài)。在多個組件之間保持狀態(tài)的一致性會是一...

    amuqiao 評論0 收藏0

  • Redux之旅－2

    摘要：之旅時間作者三月懶驢入門配置文章鏈接之旅鏈接前言上一篇文章，很簡單的用代碼來說明了，，，各自的意義和相互的聯(lián)系以及在實際開發(fā)的應(yīng)用。分割你的，使每一個更有意義，之后再合并回來。分割和合并和不同。的只有一個只有一個就意味著只有一個。 Redux之旅－2 時間：2016.4.22-11:24作者：三月懶驢入門配置文章：鏈接Redux之旅－1：鏈接 1. 前言 上一篇文章，很簡單的用代碼來說...

    liangzai_cool 評論0 收藏0

  • Redux 進階 - react 全家桶學(xué)習(xí)筆記（二）

    摘要：在函數(shù)式編程中，異步操作修改全局變量等與函數(shù)外部環(huán)境發(fā)生的交互叫做副作用通常認(rèn)為這些操作是邪惡骯臟的，并且也是導(dǎo)致的源頭。 注：這篇是17年1月的文章，搬運自本人 blog... https://github.com/BuptStEve/... 零、前言 在上一篇中介紹了 Redux 的各項基礎(chǔ) api。接著一步一步地介紹如何與 React 進行結(jié)合，并從引入過程中遇到的各個痛點引出 ...

    Godtoy 評論0 收藏0

發(fā)表評論

0條評論

wyk1184

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<