# Redux
[github](https://github.com/reduxjs/react-redux) [doc](https://redux.js.org/) [中文doc](https://cn.redux.js.org/)
### 資料的基本流程
### 三大原則
1. 只使用一個store將整個應用程式的狀態(state)用物件樹(object tree)的方式儲存起來 redux只有一個store，使用reducer functions負責每個小部分的管理（在整個store 內）
2. 唯一可改變這個state的方法就是發送action action就只是一個物件，帶入action type和參數 而實際因應action裡的內容對state做變化的函式就叫reducer
3. .因為redux框架的設計，所以所有計算新state的functions（也就是reducers）都 必須是 pure function 因為都是pure function，所以很容易debug！甚至是time-travelling between state
{% hint style="info" %}
application’s state is immutable 代表任意組件(Component)都可以修改（非修改原有的state，參考下面那句） immutable 代表不可修改的，所以redux通過 reducer functions去產生新的state去取代 舊的state\
immutable 代表不可修改的，所以redux通過reducer functions去產生新的state去取代舊的state
{% endhint %}
### 架構
* store - json object
* constant - 固定參數，通常action的type我都會寫在這
* action - function，必須包含type
* reducer - 有兩個參數，分別為舊有的state和action。而reducer回傳的就是更新後的 state
* component and container
component vs container 如下圖 ([圖片來源](https://redux.js.org/basics/usage-with-react#presentational-and-container-components))
> 簡單說，處理有關邏輯跟store的獲取、存取、變動等動作的component，稱為 container component\
> 單純處理 props 顯示在螢幕上的長相（ui），稱作 presentational component\
> react-redux提供了一個簡單的工具 connect，簡單和快速的寫出container
{% hint style="info" %}
詳細介紹可參考此 [網站](https://medium.com/@imranhishaam/react-native-with-redux-for-beginners-6281959a2899)
{% endhint %}
### 常用方法（以下皆可到上方提供的doc內看）
#### redux
* createStore - 傳入reducer，簡單的創建store redux 為 single store，此 createStore 方法在應用內應該只會被呼叫過一次
* combinReducers - 因某些原因（結構、模塊化等..）將reducer拆分成多個單獨的函數，拆分後的每 個函數負責獨立管理state的一部分。combinReducers的作用就是，把由多個不同reducer 函數作為value的object合併為一個最終的reducer函數，然後就可以對這個reducer調用 createStore方法
* applyMiddleware - 使用middelware
* binActionCreators - 傳入 actions和dispatch。使用dispatch對每個action進行包裝，以便可以直接調用他們
#### react-redux
* Provider - 在應用內，負責將唯一的store傳給其他子元件
* connect - 方法需要一些參數(第一個 () 內)，但大多數時候我們只需要前兩個參數(mapStateToProps 和 mapDispatchToProps)(Component) \
maptStateToProps 和 mapDispatchToProps 這兩個fun會回傳兩個Object，將這兩個Object整理成Props然後丟進Component內
{% hint style="info" %}
maptStateToProps - 將store內的state轉成js object作為參數傳入該container(也就是該container的props)。 透過此來選取container需要state的哪一部分 \
\
mapDispatchToProps - 此參數型態必須是function。將store的dispatch()當作參 數傳入該container(也就是該container的props)
{% endhint %}
### 跟Store交互的方法
1. dispatch(action) - 直接向store發出一個action
2. getState() - 獲取現在app內的整個store state
### Middleware
* redux-thunk
* redux-logger
* redux-persist
* redux-saga
* ....
### 實作範例
* [Counter](https://github.com/chentsulin/react-native-counter-ios-android)
* Todo List
### 參考
* [React Native Taiwan Meetup #002](https://www.youtube.com/watch?v=6kgHlvAGFLY\&feature=youtu.be)
{% hint style="info" %}
redux 下有一個store ，為json格式，但因為很大，所以有reducer把store去做切片，然後在index組成一個大的object\
Container 一個描述你的Component跟哪些reduer的切片和哪些Action有關係=> 就是利用 export connect(mapStateToProps, mapDispatchToProps)(Component); 中的 mapStateToProps和mapDispatchToProps這兩個fun會回傳2個Object，將這兩個Object整理成你的Props然後丟進Component內
{% endhint %}
{% hint style="warning" %}
此 connec t為 heighr-order function 和 heighr-order component，很推薦去暸解！
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://twins-bamboo.gitbook.io/react-native-note/advanced/redux.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.