亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

wyk1184 / 3109人閱讀

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

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

redux是一套state流的處理機(jī)制。

主要有三要素：

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

action 【命令】 一種長(zhǎng)官和士兵之間溝通的方式

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

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

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

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

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

1. 單一的state樹(shù)

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

2. 要改state，只能通過(guò)Action指令

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

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

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

// actions.js

export default function todos(type, a, b) {
  return {
    type,
    a,
    b
  }
}
3. Reducer通過(guò)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；

通過(guò) subscribe(listener) 注冊(cè)監(jiān)聽(tīng)器;

通過(guò) subscribe(listener) 返回的函數(shù)注銷(xiāo)監(jiān)聽(tīng)器。

可以說(shuō)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 更新時(shí)，打印日志
// 注意 subscribe() 返回一個(gè)函數(shù)用來(lái)注銷(xiāo)監(jiān)聽(tīng)器
let unsubscribe = store.subscribe(() =
  console.log(store.getState())
)

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79542.html

相關(guān)文章

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

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

    Anleb 評(píng)論0 收藏0

  • Redux入門(mén)教程（快速上手）

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

    amuqiao 評(píng)論0 收藏0

  • Redux之旅－2

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

    liangzai_cool 評(píng)論0 收藏0

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

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

    Godtoy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<