1.redux 了解
1.1.redux 是什麼
- redux是一個專門用于做狀态管理的JS庫(不是react插件庫)。
- 它可以用在react, angular, vue等項目中, 但基本與react配合使用。
- 作用: 集中式管理react應用中多個元件共享的狀态。
1.2. 什麼情況下需要使用redux
- 某個元件的狀态，需要讓其他元件可以随時拿到（共享）。
- 一個元件需要改變另一個元件的狀态（通信）。
- 總體原則：能不用就不用, 如果不用比較吃力才考慮使用。
1.3. redux工作流程
- Components 告訴 Action Creators 要執行的動作， Action Creators 可以有多個，它會建立一個動作對象 action，包含要執行的動作類型和動作資料，交由 dispatch 進行分發，dispatch會交給store，store 相當于一個管理者，管理各個部分，store 将 action 和 previousState 傳遞給 Reducers ，Reducers 加工狀态執行要操作的動作對象，傳回一個新的 state ，交還給 store，元件可以通過 getState() 方法得到 redux 管理的狀态.
2. redux的三個核心概念
2.1. action
- 動作的對象：建立 Action ，表示一個動作對象，将 action 交由 dispatch 方法，一個函數傳回 Action 的方法
- 包含2個屬性
- type：辨別屬性, 值為字元串, 唯一, 必要屬性（初始化的時候為@@[email protected]@）
- data：資料屬性, 值類型任意, 可選屬性（初始化時不傳該屬性）
- 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }
2.2. reducer
1.用于初始化狀态（隻執行一次）、加工狀态。
2.加工時，根據舊的state（初始化時為 undefined）和action， 産生新的state的純函數。
2.3. store
1.将state、action、reducer聯系在一起的對象
2.如何得到此對象?
- 1)import {createStore} from ‘redux’
- 2)import reducer from ‘./reducers’
- 3)const store = createStore(reducer)
3.此對象的功能?
- 1)getState(): 得到state
- 2)dispatch(action): 分發action, 觸發reducer調用, 産生新的state
- 3)subscribe(listener): 注冊監聽, 當産生了新的state時, 自動調用
3.react-redux
3.1 容器元件：
3.1.1 作用：
利用react-redux 建立 ，是一個橋梁用于連結UI元件和Redux（store），使用connect()()建立并暴露一個Count的容器元件，在UI元件中就可以用 props 接收狀态；并且不需要再檢測元件處是否重新渲染，connect 會根據狀态的改變，自動渲染元件
3.1.2 connect 方法：
connect(mapStateToProps,mapDispatchToProps)(CountUI)）：
mapStateToprops 方法用于映射狀态；
1.mapStateToProps函數傳回的是一個對象；
2.傳回的對象中的key就作為傳遞給UI元件props的key,value就作為傳遞給UI元件props的value
3.mapStateToProps用于傳遞狀态
mapDispatchToProps 方法用于映射操作狀态的方法
1.mapDispatchToProps函數傳回的是一個對象；
2.傳回的對象中的key就作為傳遞給UI元件props的key,value就作為傳遞給UI元件props的value
3.mapDispatchToProps用于傳遞操作狀态的方法
3.2 react-redux基本使用
(1).明确兩個概念：
1).UI元件:不能使用任何redux的api，隻負責頁面的呈現、互動等。
2).容器元件：負責和redux通信，将結果交給UI元件。
(2).如何建立一個容器元件————靠react-redux 的 connect函數
connect(mapStateToProps,mapDispatchToProps)(UI元件)
-mapStateToProps:映射狀态，傳回值是一個對象
-mapDispatchToProps:映射操作狀态的方法，傳回值是一個對象
(3).備注1：容器元件中的store是靠props傳進去的，而不是在容器元件中直接引入
(4).備注2：mapDispatchToProps，也可以是一個對象（簡寫方式隻需要寫 action 即可，react-redux 會幫助我們調用 dispatch 分發，例： increase: createIncrementAction）
3.3 _react-redux優化
(1).容器元件和UI元件整合一個檔案
(2).無需自己給容器元件傳遞store，給<App/>包裹一個<Provider store={store}>即可。
(3).使用了react-redux後也不用再自己檢測redux中狀态的改變了，容器元件可以自動完成這個工作。
(4).mapDispatchToProps也可以簡單的寫成一個對象
(5).一個元件要和redux“打交道”要經過哪幾步？
(1).定義好UI元件---不暴露
(2).引入connect生成一個容器元件，并暴露，寫法如下：
connect(
state => ({key:value}), //映射狀态
{key:xxxxxAction} //映射操作狀态的方法
)(UI元件)
(4).在UI元件中通過this.props.xxxxxxx讀取和操作狀态
3.4 react-redux資料共享版
(1).定義一個Pserson元件，和Count元件通過redux共享資料。
(2).為Person元件編寫：reducer、action，配置constant常量。
(3).重點：Person的reducer和Count的Reducer要使用combineReducers進行合并，合并後的總狀态是一個對象！！！
(4).交給store的是總reducer，最後注意在元件中取出狀态的時候，記得“取到位”。
3.5 react-redux開發者工具的使用
(1).yarn add redux-devtools-extension
(2).store中進行配置
import {composeWithDevTools} from ‘redux-devtools-extension’
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
3.6 react-redux最終版
(1).所有變量名字要規範，盡量觸發對象的簡寫形式。
(2).reducers檔案夾中，編寫index.js專門用于彙總并暴露所有的reducer