Redux學習簡述

簡述redux（1）

---

概念： 是一個有用的架構，應用場景一般爲：多交互、多數據源。如：

• 某個組件的狀態需要共享
• 某個狀態需要在任何地方可以看到
• 一個組件需要改變全局狀態。
• 一個組件需要改變另一個組件的狀態

設計思想

1. Web 應用是一個狀態機，視圖與狀態是一一對應的。
2. 所有的狀態，保存在一個對象裏面。

API

• store：保存數據的地方，可以看成是一個容器，整個應用只有一個store，Redux提供了createStore函數，用於生成Store對象。

  import { createStore } from 'redux';
  const store = createStore(fn);
  

• state：store度下你給包含所有數據，如果想得到某個時點的數據，就要對store生成快照，這種時點的數據集合就叫做State，當前時刻的state可以通過state.getState()拿到。

  import { createStore } from 'redux';
  const store = createStore(fn);
  
  const state = store.getState();
  

• action：State 的變化，會導致 View 的變化。State 的變化必須是 View 導致的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。Action 是一個對象。其中的type屬性是必須的，表示 Action 的名稱。

  const action = {
    type: 'ADD_TODO',
    payload: 'Learn Redux'
  };
  

• Action Creator：生成多個action。

• 基本概要圖解
  

• 待續