用 Redux 來記錄資料，並致時光旅行除錯顯示

Redux 不是 React.js 的一環，但是 Redux 常被整合於 React.js 中，故把分類放置到 React，實際上 Redux 可以適用在所有 Javascript 的應用程式上。

安裝

Yarn: yarn add redux
Npm: npm install --save redux

Chrome 外掛:
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

使用流程

1.  匯入 redux

import React, { Component } from 'react';



2.  先宣告如何處理你要發生的事件
這個事件會在初始化 redux 的時候給 redux，這個事件發送後，不是什麼滑鼠按下的事件，而是你等等產生事件後，如何處理你的事件。


//參數依序為: 先前的狀態 (state), 你產生的動作 (action) 這個動作可能是 { type:"ADD_ITEM", text:"gogo" } 如此一來你就能辨別。
function addItem(state = [], action){
 switch(action.type){
  case 'ADD_ITEM':
   return  [action.text, ...state]
  default:
   return state
 }
}



3. 建立 redux 的 store ，可以用來儲存、紀錄事件，並且初始化 Chrome 除錯外掛

const store = createStore(addItem, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())



4. 讓你的 render 程式訂閱 redux 資料更新，可以自動幫你 render

store.subscribe(render)



5. 產生 redux 事件

store.dispatch({type: 'ADD_ITEM', text: "somevalue" })

這個事件產生後， redux 就會調用你剛剛的 addItem 這個 function，你可以再自行處理。

方法解說

addItem 事件進入處理 *新舊 state

當你可能在按鈕上的 onClick 事件中，調用 redux 的事件 (dispatch) 來發送訊息動作，在那之後 redux 需要你來定義一個處理的方式，來搞定 state 中的資料，定義後只需要回傳 (return) 就可以被設定進新狀態。

如上述流程 2. 的程式碼，假設你會產生一個訊息動作，叫做

{ type:"ADD_ITEM", text:"Hello" }

，那麼這個 addItem 的 action 參數，就會是這個訊息，至於 state 這個參數，則是你先前的 state 狀態，所以你可以很輕鬆的把資料放入舊有的 state ，然後 return 回一個新的 state。

createStore 初始化

redux 需要先建立一個 store，也可以說是 state ，其實也就只是一個物件還是跟 react.js 的 state ，是一個物件，用來記錄變化。

但是第一個參數則要是你放入如何處理你自己的事件，來改變 state ，所以才要寫 addItem。

store.dispatch 產生事件

你可以在按鈕 click 後產生一個事件 (如流程 5.)，來改變 state ，這個事件會傳送你的 array 或是 object 之類的資料，所以你最好可以用 object 來傳送，且加入一個欄位是 type ，好讓你區別這是什麼事件。

訂閱更新，讓 render 隨時起作用

你的 render 方法可能是要顯示 state 中的所有資料，成為一個 list ，那麼只要 dispatch 資料一更新，網頁資料就會是舊的，這個時候你就需要把你的 render 方法，訂閱到 redux 的 state 更新，只要 state 一變動，就更新 render，方法如 (流程 4.)。

store.getState() 來獲得目前的 state 有什麼東西

你可以用 store.getState() 來取得目前 Redux 的 state 資料，可能是一個陣列、物件或是值，並可以用在 render ，要渲染一個 list 的時候，呼叫 getState() 把資料先挖出來。

console.log(store.getState());
store.getState().map( (data)=>{ console.log(data) } )

Referene:
http://ithelp.ithome.com.tw/articles/10187498
http://eddychang.me/blog/javascript/94-flux-concept.html
http://eddychang.me/blog/javascript/98-why-setstate-is-async.html
https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e
http://redux.js.org/
https://github.com/zalmoxisus/remote-redux-devtools
https://github.com/zalmoxisus/redux-devtools-extension#usage