一、Redux理解
1. 學習文檔
- 英文文檔: https://redux.js.org/
- 中文文檔: http://www.redux.org.cn/
- Github: https://github.com/reactjs/redux
- 安裝
npm install --save react-redux npm install --save-dev redux-devtools
2. redux是什麼
- redux是一個專門用於做狀態管理的JS庫(不是react插件庫)。
- 它可以用在react, angular, vue等項目中, 但基本與react配合使用。
- 作用: 集中式管理react應用中多個組件共享的狀態。
3. 什麼情況下需要使用redux
- 某個組件的狀態，需要讓其他組件可以隨時拿到（共享）。
- 一個組件需要改變另一個組件的狀態（通信）。
- 總體原則：能不用就不用, 如果不用比較喫力才考慮使用。
4. redux工作流程
二、 redux的三個核心概念
1. action
- 動作的對象
- 包含2個屬性
1）type：標識屬性, 值爲字符串, 唯一, 必要屬性
2） data：數據屬性, 值類型任意, 可選屬性
3.例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
2. reducer
- 用於初始化狀態、加工狀態。
- 加工時，根據舊的state和action， 產生新的state的純函數。
3. store
- 將state、action、reducer聯繫在一起的對象
- 如何得到此對象?
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時, 自動調用
三、代碼
求和案例：
(1).去除Count組件自身的狀態
(2).src下建立:
-redux
-store.js
-count_reducer.js
(3).store.js：
1).引入redux中的createStore函數，創建一個store
2).createStore調用時要傳入一個爲其服務的reducer
3).記得暴露store對象
(4).count_reducer.js：
1).reducer的本質是一個函數，接收：preState,action，返回加工後的狀態
2).reducer有兩個作用：初始化狀態，加工狀態
3).reducer被第一次調用時，是store自動觸發的，
傳遞的preState是undefined,
傳遞的action是:{type:'@@REDUX/INIT_a.2.b.4}
(5).在index.js中監測store中狀態的改變，一旦發生改變重新渲染<App/>
備註：redux只負責管理狀態，至於狀態的改變驅動着頁面的展示，要靠我們自己寫。
（6）count_action.js 專門用於創建action對象
（7）constant.js 放置容易寫錯的type值
1. index.js
1 import React from 'react' 2 import ReactDOM from 'react-dom' 3 import App from './App' 4 import store from './redux/store' 5 6 ReactDOM.render(<App/>,document.getElementById('root')) 7 //檢測redux中狀態的變化，只要變化，就調用render
8 store.subscribe(()=>{ 9 ReactDOM.render(<App/>,document.getElementById('root')) 10 })
2.store.js
1 /* 2 該文件專門用於暴露一個store對象，整個應用只有一個store對象 3 */ 4 5 //引入createStore，專門用於創建redux中最爲核心的store對象 6 import {createStore} from 'redux' 7 //引入爲Count組件服務的reducer 8 import countReducer from './count_reducer' 9 //暴露store 10 export default createStore(countReducer)
3.count_reducer.js
1 /* 2 1.該文件是用於創建一個爲Count組件服務的reducer，reducer的本質就是一個函數 3 2.reducer函數會接到兩個參數，分別爲：之前的狀態(preState)，動作對象(action) 4 */ 5 import {INCREMENT,DECREMENT} from './constant' 6 7 const initState = 0 //初始化狀態 8 export default function countReducer(preState=initState,action){ 9 // console.log(preState); 10 //從action對象中獲取：type、data 11 const {type,data} = action 12 //根據type決定如何加工數據 13 switch (type) { 14 case INCREMENT: //如果是加 15 return preState + data 16 case DECREMENT: //若果是減 17 return preState - data 18 default: 19 return preState 20 } 21 }
4. count_action.js
1 /* 2 該文件專門爲Count組件生成action對象 3 */ 4 import {INCREMENT,DECREMENT} from './constant' 5 6 export const createIncrementAction = data => ({type:INCREMENT,data}) 7 export const createDecrementAction = data => ({type:DECREMENT,data})
5.constant.js
1 /* 2 該模塊是用於定義action對象中type類型的常量值，目的只有一個：便於管理的同時防止程序員單詞寫錯 3 */ 4 export const INCREMENT = 'increment' 5 export const DECREMENT = 'decrement'
6. Count.jsx
1 import React, { Component } from 'react' 2 //引入store，用於獲取redux中保存狀態 3 import store from '../../redux/store' 4 //引入actionCreator，專門用於創建action對象 5 import {createIncrementAction,createDecrementAction} from '../../redux/count_action' 6 7 export default class Count extends Component { 8 9 state = {carName:'奔馳c63'} 10 11 /* componentDidMount(){ 12 //檢測redux中狀態的變化，只要變化，就調用render 13 store.subscribe(()=>{ 14 this.setState({}) 15 }) 16 } */ 17 18 //加法 19 increment = ()=>{ 20 const {value} = this.selectNumber 21 store.dispatch(createIncrementAction(value*1)) 22 } 23 //減法 24 decrement = ()=>{ 25 const {value} = this.selectNumber 26 store.dispatch(createDecrementAction(value*1)) 27 } 28 //奇數再加 29 incrementIfOdd = ()=>{ 30 const {value} = this.selectNumber 31 const count = store.getState() 32 if(count % 2 !== 0){ 33 store.dispatch(createIncrementAction(value*1)) 34 } 35 } 36 //異步加 37 incrementAsync = ()=>{ 38 const {value} = this.selectNumber 39 setTimeout(()=>{ 40 store.dispatch(createIncrementAction(value*1)) 41 },500) 42 } 43 44 render() { 45 return ( 46 <div> 47 <h1>當前求和爲：{store.getState()}</h1> 48 <select ref={c => this.selectNumber = c}> 49 <option value="1">1</option> 50 <option value="2">2</option> 51 <option value="3">3</option> 52 </select> 53 <button onClick={this.increment}>+</button> 54 <button onClick={this.decrement}>-</button> 55 <button onClick={this.incrementIfOdd}>當前求和爲奇數再加</button> 56 <button onClick={this.incrementAsync}>異步加</button> 57 </div> 58 ) 59 } 60 }