React框架這樣的純視圖的框架對組件通信、狀態共享等方面沒有太好的解決方案，只能利用狀態提升、context之類的技術方案來解決， 但是當組件結構、數據流向都比較復雜的時候，React本身的Api解決這樣的問題就有些吃力。

　　此時就可以使用Flux、Redux這樣的架構方式來解決問題。

　　我們之前的項目就在使用Redux，后來又有了rtk，讓redux在react組件中的使用更加方便，在一些小型的項目， 或者一些小模塊中， 利用useReducerHook來進行state與dispatch的構建，也能快速優雅的解決問題。

　　之前的原生Redux中，真實項目開發中，往往需要搭配redux-thunk來進行異步action處理，以及react-redux來進行組件與store的連接， 如果不使用react-redux的話，會比較繁瑣。

　　redux的結構分為store、Views、Actions、Reducer。

　　Store中存儲的狀態在視圖中可以通過getState來獲取，也可以通過subscribe方法進行監聽，當視圖產生UI操作的時候， 可以調用actions的方法來生成action后，利用dispatch方法進行派發，此時reducer就會被調用，并且接收到當前的狀態與action對象， 經過計算出，返回新狀態，Store就會進行狀態的更新。

　　利用react-redux后， 組件可以通過connect搭配mapStateToProps及mapDispatchToProps參數來獲取store中的狀態及actions中的方法。

　　使用RTK之后，創建reducer更近方便，利用useSelector和useDispatch可以更快更高效取用狀態及派發action。

　　對于一個小的場景，比如之前我做的注冊模塊有三個步驟，每個步驟都需要用到第一步用戶填寫的手機號等信息，這樣就形成了幾個小組件間的狀態共享， 如果使用父組件狀態提升會導致數據流向不清晰，也犯不上使用redux-store進行存儲，于是就是使用useReducer快速的創建了一個小的store，內部集成了state與dispatch，搭配Context，也能很高效的解決問題。

上一篇

react生命周期16版本刪除了什么鉤子函數?

下一篇

視頻轉碼中什么意思