Redux 狀態(tài)管理機(jī)制
redux就是把react項目的能用到的所有數(shù)據(jù)做個一個大整合噪伊，統(tǒng)一放在store中诚隙，一個項目里面只能有一個store,我們頁面用用到的數(shù)據(jù)都通過mapStateToPorps方法傳porps進(jìn)來，鋪到頁面中來。如果在頁面中需要對這些數(shù)據(jù)進(jìn)行操作的通過使用mapDispatchToProps方法把數(shù)據(jù)輸出給actions來進(jìn)行邏輯處理刹枉，返回新的state，reducer函數(shù)接收新的state屈呕，更新到store上面微宝，頁面刷新。
store
- 使用
createStore生成store樹虎眨，如果需要中間件,把中間件放到applyMiddleware方法中傳給createStore -
<Provider store={store}></Provider>根組件要嵌套在Provider組件中蟋软，并將創(chuàng)建的store作為prop傳給Provider，才能使用connect()方法嗽桩，而connect()方法能夠獲得 redux store岳守。簡單來說，只要是使用state的組件都是要放在Provider里面的涤躲，而且必須connect
頁面組件
components
- 用來存放展示頁面棺耍，可復(fù)用的頁面
- 相當(dāng)于container的子組件
container
- 有操作數(shù)據(jù)的頁面，需要邏輯處理的頁面
頁面數(shù)據(jù)的輸入和輸出
-
數(shù)據(jù)的輸入
const mapStateToProps = state => ({
data:state
})在render里引進(jìn)來
const {data} = this.props
好了完工种樱，可以在頁面中放心大膽的用了 -
數(shù)據(jù)的輸出
const mapDispathToProps = (dispatch) => {
return{
loadState:() => dispatch(loadState())
}
}
在頁面中調(diào)用loadState方法蒙袍，觸發(fā)dispatch發(fā)出Action來一輪數(shù)據(jù)更新
- 頁面末尾要使用connect()方法 很重要哦一定不能少
`export default connect(mapStateToProps, mapDispatchToProps)(conponentName)
Action
我們頁面中涉及到的數(shù)據(jù)處理，以及fetch都在action中處理
Action 和Action Creator是不一樣的嫩挤。
Action是一個對象害幅，必須有一個type屬性，這個type就是action的名字岂昭，其他屬性就可以隨便定義寫你的數(shù)據(jù)以现。在頁面中通過dsipatch發(fā)出action對象，這種寫法好麻煩约啊，所以一般都用Action Creator.
-
來個例子最明白
export const loadState = () => dispatch => dispatch({
type:'LOAD_STATE'
data:'haha,I'm SiWen'
})
Reducer
-
Reducer 是一個函數(shù)邑遏，有當(dāng)前state和action兩個參數(shù),返回一個新的state.一般要給一個初始state值
const initialState ={data:''haha,I'm SiWen''}
const reducer = (state = initialState, action) => {
switch (action.type) {
case LOAD_STATE:
return {
...state,
data:action.data
}
default:
return {
...state
}
}
} 一般我們會有很多的reducer,來獨(dú)立負(fù)責(zé)管理state的一部分，這時候就要用到combineReducers函數(shù)了恰矩，它把多個reducer合并成一個最終的reducer记盒，格式為stateName：reducerName
好了，根據(jù)我現(xiàn)在的理解就醬了
