react-redux基本使用和數據流向

react的狀態管理工具react-redux

我們先來看一下react-redux的工作流程

redux的組成部分

redux簡單的來說他分爲這幾個部分

• state
• reducer
• aciton
• store

state：如果你熟悉vuex的話你可以把他當成vuex裏面的模塊化，相當於數據樹的一個分支或者總體。

const State = {
    imgList:[]
}

reducer：通過傳入的aciton去改變state的值，並且向外面暴露輔助生成store。

const reducer = (state = State,action)=>{
    switch(action.type){
        case 'ADD_IMGLIST':
            return {
                ...state,
                imgList:action.data
            }
        default :
            return state
    }
}
export default reducer

aciton：通過dispatch一個action來進入reducer，在reducer中獲取action的type去更改state。

dispacth({
       type:'ADD_IMGLIST',
       data
})

store : 使用createStore方法把reducer生成一個store,store會在根據connect方法解析爲props放在組件中。

const store = createStore(reducer)
let reducer = combineReducers({
    feedBack
})

如何在把數據放在react組件中？

如果不使用react-redux的話，那麼react自帶的context絕對是最好的方法。react-redux中可以解析出provide，把store當做props使數據向下傳遞。但是注意一定要放在跟組件內，因爲要全局通訊，從這裏我們可以看出來了redux和react的強耦合的關係。

ReactDOM.render(
  <Provider store={store}>
     <App/>
  </Provider>,
  document.getElementById('root')
);

如何把數據在react中拿到？

使用context的話可以在Consumer中拿到然後渲染，react-redux中也有Consumer方法，另外他還有更好的支持就是connct方法

const mapstatetoprops = (state)=>{
    return {
        imglist:state.feedBack.imgList
    }
}
const mapdispatchtoprops = (dispacth)=>{
    return {
        addImgList(data){
            dispacth({
                type:'ADD_IMGLIST',
                data
            })
        }
    }
}
//手寫兩個靜態方法，名字中我們可以看出是state和dispatch到props的映射關係
connect(mapstatetoprops,mapdispatchtoprops)(組件名稱)
//最後通過傳入這兩個方法，然後包裹組件暴露在外面，以上方法和props我們可以直接使用
this.props.addImgList()
this.props.imglist
//獲取值或者調用方法。

數據流向文字描述

創建state來存儲公共數據，使用reducer來進行對state的改變，store把reducer封裝作爲數據源放在react的props中，在組件內觸發方法disptch一個action，action中含有狀態和data，reducer接收狀態進行對state的改變，從而react的view層進行重新渲染。

​