React Native Redux 學習筆記

其實朋友們可以跳過這篇文章，我寫得很碎片式，只是寫給我自己看的。(如果有寫錯的地方 也麻煩留個言給我 導正我一下，目前，我還沒試出一個簡單架構出來...，也許 最近會開始嘗試吧，資料太多，暫時無法一次到位)
[粗人見解] 學習 redux 我建議去上網找一個簡單的 sample，跟著做。

• Redux 從 Flux 的概念發展而來，受 Elm 函數式編程的影響，減低 redux 的複雜度。 (這句我看不懂... 還不了解 Elm，這部分可參考 [gitbook] Redux 中文文檔 - 先前技术)。
• Redux 是狀態容器，由 Facebook 推出。
• Redux 零依賴，可以獨立使用，不需要跟 React 在一起，但如果是要跟 react 一起用，記得引入 react-redux (npm install react-redux)。
• Redux 主要核心:
1.  action
2.  store
3.  reducers 

• Redux  概念是嚴格的單向數據流。

安裝
這裡我覺得我有寫跟沒寫一樣。就看官方文件就知道了，我自己主要還是透過 npm。

npm install redux --save

若你正在開發 react 專案，需安裝以下:

npm install --save react-redux
npm install --save-dev redux-devtools

Store

• 把 action, reducers 連接在一起的地方。
• 一個 Redux Application 就只有一個 state tree。
• state tree 存在單一個 store。(其實跟上一句話一樣的意思)
• 改變 state 只能靠發送 action。

store 主要有三個方法:

• getState 取得當前的 state tree.
• dispatch(action) 觸發 state 唯一方法.
• subscribe(listener) 註冊監聽器.

action

• 唯一可以改變 state 的地方
• 指定怎麼改變 state tree 需要撰寫 reducers.

reducers

• 描述 action 怎麼改變 state, 這裡主要是寫一些 function，該 function 可以接受的參數為舊的 state 和 action 參數，而 return 回新的 state。
• 你不應該改變 state 物件，而是當 state 改變時回傳一個新的物件。
• 更變內部 state 的唯一方法是 dispatch 一個 action。
• 通常我們的業務邏輯很多，可能會有很多個 reducers，reducers 太多的話，可以拆分 reducer，讓每個 reducer 只負責管理 global state 中一部分的數據，但是，我們最終要傳給 store 只能是一個 reducer，所以 Redux 有提供 combineReducers() 這個函式來使用，利用 combineReducers (把多個 reducers 組合成一個) 所產生的最大的 reducer 會傳到 createStore 來產生 store。

三個基礎原則 Three Principles

• 唯一真相來源 Single source of truth，整個 application 的 state 被存在唯一的 store。
• State is read-only，state 只能唯讀，唯一可改變 state 的就是去呼叫 action。
• action creator, Reducers 要寫成 pure functions (No surprises. No side effects. No API calls. No mutations.)，簡單來說就是沒有副作用的 function，不要在這個 function 裡面還去 call 其他的 api 之類的。

可參考: http://cn.redux.js.org/docs/introduction/ThreePrinciples.html

Redux 的狀態改變流程

觸發 action -> call reducer function -> 產生新的 store -> 更新 UI 上的呈現。

使用 Redux

• 基礎用法：同步 action。
• 進階用法: 異步的 action，redux 剛開始的設計很簡潔，但為了考慮到異步的功能，所以 middleware 隨之而來。如，異步 API 請求，用 redux-thunk (thunk 蠻有名的，看教學文章一直看到它...). 他的作用是把複雜的動作封裝到 action. 
• redux-thnuk 是一個 redux 的 middleware，在 redux 中的異步，只能出現在 action 中。

同步與異步的差別:
1. 同步只會 return 一個 action.
2. 異步會 return promise. 但是 promise 後也會 return 一個 action.

使用 middleware，請參考 http://cn.redux.js.org/docs/api/applyMiddleware.html，範例可以搜尋這個 url 的 "示例: 使用 Thunk Middleware 来做异步 Action"。

常見依賴的 package
這個部分看這裡(https://chentsulin.github.io/redux/docs/introduction/Ecosystem.html)比較快。

• react-redux (react 針對 redux 的一種封裝，提供 Provider)
• redux-promise
• redux-devtools
• redux-logger (日誌工具)
• redux-thunk (異步 action)
• redux-form

在 RN 中沒有導入 redux 可能的問題
每個 component 都獨立擁有自己的 props, state。 component 除了 render 方法之外的 function 也都可以呼叫 setState 來改變 state，容易出現 state 修改混亂的問題. 對於 state 的管理沒有一定的規則。

React-Redux
提供兩個 api: <provider store> 還有 connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])。
通常 provider 會包在整個 component 的最外層。然後這樣所有的子 component 都可以拿到 store。

connect 函式，可以把拿到 store 裡面的 state，最後轉成該 component 的 props 來用。關於 connect 的示範你可以看看 http://cn.redux.js.org/docs/react-redux/quick-start.html，搜尋 "容器组件使用 connect() 方法连接 Redux" 文字，看那一段。

一些參考
感謝這些網路上優秀的文章及教學:

• Getting Started with Redux: 30 部 Dan Abramov 講述的影片組成的影片課程，他是 Redux 的作者
• Building React Applications with Idiomatic Redux
• http://redux.js.org/index.html
• react-native基础：redux学习
• Redux在达达
• 深入到源码：解读 redux 的设计思路与用法
• 这段时间研究了下Redux，写写自己对它的感觉
• http://react-china.org/
• 從<琅琊榜>學 Redux
• Redux 溫習筆記
• A Tour of React Native — Part 2: Redux & Friends
• 在React Native中使用Redux架构
• React Native 从入门到原理
• React Native通信机制详解
• https://medium.com/@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks-48ca0f47f9a#.mcsd3i6um
• https://github.com/lewis617/react-redux-tutorial
• http://www.jianshu.com/p/2c43860b0532
• http://blog.thebakery.io/todomvc-with-react-native-and-redux/

之後若有看到不錯的我會再更新，我現在每天例行性的會在 google 上尋找關於 RN + redux 的文章，包含簡書，React Native cn 社群，reddit，medium.com。