Redux 優點

1. 所有東西 (Stores, Action Creators, config) 都可以 hot reload
2. 防止一些常見 anti-patterns
3. 容易做 universal，沒用到 sigleton 而且資料可以 rehydrated
4. 可以用任何形式保存資料：JS objects, arrays, ImmutableJS..
5. 簡化至一個 Store，不用思考個別 Store
6. 提供 redux-devtools Time travel 功能跟容易實作其他功能的介面
7. 可以用 middleware 擴充 dispatch
8. 不用 mock 就很容易測試

而且他的 API 很少，核心只有 createStore 的 150 行程式碼

容易學、好擴充

Action

只是個普通的 js object

{
  type: SEND_MESSAGE,
  payload: {
    text: 'Hello world'
  }
}
						

Flux Standard Action

Flux Standard Action 有一個普遍的 action 定義，
包括 meta, error 等欄位

Action Creators

通常寫在 Actions 或 ActionCreators 命名的檔案中

小心盡量不要跟 Action 搞混

使用 thunkMiddleware, PromiseMiddleware 後，
就可以延伸的 ActionCreator 的功能，
這邊先不做敘述

Reducer

給 store 初始的 state，並根據收到的 action 回傳新的 state

就像是原本的 store 的一部分工作

(previousState, action) => newState

每次收到 dispatch 的 action 就會觸發，根據原本的 previousState，來回傳新的 newState

這樣的 functional 的做法，可以更簡潔的表達如何變更 state

在一開始的時候 Redux 會先
dispatch 一個@@redux/INIT action 來初始化 state，
@@namespace/EVENT_NAME 是
目前 private event 的命名規範，
不要試圖去聽這些 event

Store

應用程式保存 state 的地方，Redux 只有一個

Middleware

用來延伸 dispatch 的功能

dispatch => dispatch'

讓 dispatch 經過一個個的 middleware decorate

const store =
applyMiddleware(promise, thunk, observable)(createStore)(reducer);
// store.dispatch => promise(thunk(observable(store.dispatch)));
						

View

Redux 本身並不依賴特定 view layer，
所以可以跟任何 view layer 去結合

react-redux 就是 react 跟 redux 的介接

他提供兩個 component：

• Provider
• Connector

還有對應的 decorator：

• @provide
• @connect

不過...

Provider

connect

bindActionCreators

Redux 還有一個可以方便去使用 ActionCreator 的 util