Redux學習筆記

Redux

Redux 對於通訊工程專業的來講能夠這麼理解

在不用Redux的時候，組件中的信息傳遞就好像我經過用嘴巴說的方式向你傳遞信息，可是當週圍環境比較嘈雜信息比較多或者我距離你比較遠的時候，信息的傳遞就比較費勁了，一句兩句還好，多了確定會很累。

那麼Redux是個什麼存在呢？他就像一個基站，我和你們的全部數據傳遞都用手機打給你的手機，然而手機與手機之間的信息傳遞不是  手機 <-----> 手機這樣的。

而是  手機 <---->  基站  <----> 手機  這樣的關係。

而 Redux對於整個單頁來講就有點像基站的存在，全部數據統一經過Redux來進行管理。

Redux的出現是爲了讓應用當中全部動做和狀態統一管理，讓一切有據可循。

Store

store與state的區別，state是應用的一個狀態，本質上來講他是一個普通對象。

而store是state對象的一個管理者，包含下面四個函數

getState() # 獲取整個 state
dispatch(action) # ※ 觸發 state 改變的【惟一途徑】※
subscribe(listener) # 您能夠理解成是 DOM 中的 addEventListener
replaceReducer(nextReducer) # 通常在 Webpack Code-Splitting 按需加載的時候用

state和store存在這種關係:     

var state = store.getState();

在Redux當中規定，一個應用只有單一的store,而且不能直接修改store當中的state

var state = store.getState()
state.counter = state.counter + 1 // 禁止在業務邏輯中直接修改 state

改變store當中的state只能經過dispatch一個action來進行，這個是修改應用狀態的惟一方法

就好像你不能直接和基站說你要發短信，發QQ消息，打電話給誰誰誰，這個確定是行不通的。

你須要經過手機來選擇具體的操做，你須要發送短信，就打開短信工具，而後發送短信。須要打電話就打開通信錄選擇對方打過去。須要發送QQ視頻就打開QQ發送視頻。

這些具體的動做就是action,你須要選擇一個具體的動做而後發送信息，而後基站才能經過這些具體的動做來執行，達到目的。

那麼store是怎麼來的呢？

你須要一個基站，那麼基站如何知道怎麼處理你發送過來的各類不一樣的信息，而且作出正確的處理呢？

這個就須要你在設計製造這個「基站」的時候根據你的需求來設計出一個具體的處理方案。

這個時候就須要一個  createStore ，這個就是製造「基站」的工廠。

調用createStore傳入一個reducer來生成一個store.

reducer就好像是你的設計圖，你把這個設計圖給一個叫 reducer 的代工廠，這個代工廠就會根據你的設計圖來給你製做出一個特製的基站，用來處理你的各類數據操做。

import { createStore } from 'redux'
...
const store = createStore(reducer, initialState) // store 是靠傳入 reducer 生成的哦！
 是一個 函數，負責更新並返回一個新的 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　而  主要用於先後端同構的數據同步（詳情請關注 React 服務端渲染）
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　reducerstateinitialState

Action

實質上是一個包含type屬性的普通對象，這個type是store這個基站用來識別用戶行爲的關鍵。

{
  type: 'ADD_TODO', // 發短信，打電話，發送qq視頻，發送qq消息...
  payload: {   //發送的信息, QQ消息，語音消息。。。。
    id: 1,
    content: '待辦事項1',
    completed: false
  }
}

 Action當中的信息只用type是必需要的，其餘的數據能夠是任意的。

Action Creator

Action Creator 是 action 的創造者，本質上就是一個函數，返回值是一個 action（對象）

var id = 1
function addTodo(content) {
  return {
    type: 'ADD_TODO',
    payload: {
      id: id++,
      content: content, // 待辦事項內容
      completed: false  // 是否完成的標識
    }
  }
}

這樣就不須要每次有新的相同行爲的時候都從新定義一個了，直接使用action creator來生成傳入變量便可

Reducer

用戶每次 dispatch(action) 後，都會觸發 reducer 的執行
reducer 的實質是一個函數，根據 action.type 來更新 state 並返回 nextState
最後會用 reducer 的返回值 nextState 徹底替換掉原來的 state

var initState = {
  counter: 0,
  todos: []
}

function reducer(state, action) {
  // ※ 應用的初始狀態是在第一次執行 reducer 時設置的 ※
  if (!state) state = initState
  
  switch (action.type) {
    case 'ADD_TODO':
      var nextState = _.cloneDeep(state) // 用到了 lodash 的深克隆
      nextState.todos.push(action.payload) 
      return nextState

    default:
    // 因爲 nextState 會把原 state 整個替換掉
    // 若無修改，必須返回原 state（不然就是 undefined）
      return state
  }
}

通俗點講，就是 reducer 返回啥，state 就被替換成啥

總結

• store 由 Redux 的 createStore(reducer) 生成

• state 經過 store.getState() 獲取，本質上通常是一個存儲着整個應用狀態的對象

• action 本質上是一個包含 type 屬性的普通對象，由 Action Creator (函數) 產生

• 改變 state 必須 dispatch 一個 action

• reducer 本質上是根據 action.type 來更新 state 並返回 nextState 的函數

• reducer 必須返回值，不然 nextState 即爲 undefined

• 實際上，state 就是全部 reducer 返回值的彙總