js手札--redux簡單學習[ store, action, reducer ]

wyk1184 發布于2019-08-19 18:23 / 3066人閱讀

摘要：簡單學習前言是一套流的處理機制。可以說是真正的管理者，其他的，如是命令，是執行命令的士兵。打印初始狀態每次更新時，打印日志注意返回一個函數用來注銷監聽器發起一系列停止監聽更新簡單學習二

Redux簡單學習 - [ store, action, reducer ] 前言

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

主要有三要素：

store 【長官】管理狀態，給某個士兵發命令

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

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

主要有三層數據流：

長官下達命令并把當前任務狀態告訴士兵 =>

士兵執行命令反饋任務狀態給長官 =>

長官更新任務狀態

1. 單一的state樹

所有狀態都在一顆唯一的state樹種

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

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

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

Action一般通過Action創建函數生成

// 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的變化

維持應用的 state；

提供 getState() 方法獲取 state；

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

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

通過 subscribe(listener) 返回的函數注銷監聽器。

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

// store.js

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

let store = createStore(todoApp);

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

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

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

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

redux簡單學習（二）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79542.html

js手札--redux簡單學習（二）

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

Anleb 2019-08-19 18:24 評論0 收藏0
Redux入門教程（快速上手）

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

amuqiao 2019-08-21 16:55 評論0 收藏0
Redux之旅－2

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

liangzai_cool 2019-08-19 18:20 評論0 收藏0
Redux 進階 - react 全家桶學習筆記（二）

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

Godtoy 2019-08-23 10:58 評論0 收藏0