react-redux

1、原理圖

用react-redux的話必須要向redux一樣更新需要在最外層訂閱，它不需要訂閱會自動更新

npm install redux

npm install redux-thunk 

npm install redux-devtools-extension

安裝：npm install react-redux

 2、容器元件

首先，假設我希望在Count這個UI元件中用到一個redux的對象count，是不能直接使用的。需要在Count這個UI元件外包裹一個容器元件Count，容器元件才能操作state裡面的資料和釋出action，然後Count的容器元件通過props把state的資料和改變資料的方法也就是action傳給UI元件。

那麼首先要知道，怎麼把Count的UI元件和Count的容器元件連接配接起來：

• 引入connect用于連接配接UI元件與redux

                import {connect} from 'react-redux'

• 使用connect()()建立并暴露一個Count的容器元件

1. connect(mapStateToProps,mapDispatchToProps)(UI元件)
2. 第一個參數接收一個函數（mapStateToProps）傳遞狀态和一個函數傳遞（mapDispatchToProps）操作狀态的方法
3. 第二個參數接收連接配接的UI元件

//引入Count的UI元件
import CountUI from '../../components/Count'
//引入action
import {
	createIncrementAction,
	createDecrementAction,
	createIncrementAsyncAction
} from '../../redux/count_action'

//引入connect用于連接配接UI元件與redux
import {connect} from 'react-redux'

/* 
	1.mapStateToProps函數傳回的是一個對象；
	2.傳回的對象中的key就作為傳遞給UI元件props的key,value就作為傳遞給UI元件props的value
	3.mapStateToProps用于傳遞狀态
*/
function mapStateToProps(state){
	return {count:state}
}

/* 
	1.mapDispatchToProps函數傳回的是一個對象；
	2.傳回的對象中的key就作為傳遞給UI元件props的key,value就作為傳遞給UI元件props的value
	3.mapDispatchToProps用于傳遞操作狀态的方法
*/
function mapDispatchToProps(dispatch){
	return {
		jia:number => dispatch(createIncrementAction(number)),
		jian:number => dispatch(createDecrementAction(number)),
		jiaAsync:(number,time) => dispatch(createIncrementAsyncAction(number,time)),
	}
}

//使用connect()()建立并暴露一個Count的容器元件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

           

3、UI元件

4、整合UI元件和容器元件 

想上面那樣分開寫UI元件和容器元件太麻煩了，一般都一起寫：

 store存儲多個變量：

reducers檔案夾中，編寫index.js專門用于彙總并暴露所有的reducer

 5、react-redux開發者工具的使用

      (1) npm install redux-devtools-extension

      (2).store中進行配置

          import {composeWithDevTools} from 'redux-devtools-extension'

          const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

參考連結：

尚矽谷2021版React技術全家桶全套完整版（零基礎入門到精通/男神天禹老師親授）_哔哩哔哩_bilibili