學習react基礎知識（五）

redux 全局狀態管理

react-redux

優化模塊 優化redux的使用過程

npm install redux react-redux 

1. 經過react-redux 提供的provider提供器 將全局狀態對象掛載到根元素的上下文上

import Provider from 'react-redux'
import store from './store/store.js'
...
<Provider store = {store}>
 <App></App>
</Provider>
...

2. 在組件中使用全局狀態值經過react-redux 提供的connect 從跟組件的上下文上獲取store對象，經過高階組件將得到到的store傳給目標組件的props

  import {connect} from 'react-redux'
 class Son1 ... {}
 connect(state=>state)(Son1)

3. 組件中修改全局狀態值 不須要寫組件監聽組件 -> actionCreator -> redcuer ->組件（監聽更新）

   1. 組件的裏的監聽不用寫了

   2. actionCreator 默認作兩個事情1.建立action 2.經過dispath 發送action actionCreator 使用插件以後只要 建立action

   3. 在組件裏發送

react-redux 中異步action

解決方式經過異步中間件 redux-thunk redux-sage redux-promise ....

1. 安裝異步插件 npm install redux-thunk

2. 在store.js 引入並使用

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk' //解決異步的插件
import reducer from './reducer'
export default createStore(reducer,applyMiddleware(thunk))

3. 除了actionCreatore 須要修改以外 其餘的都不用動 a. 若是是同步的方法也不須要動 返回actionb. 若是action裏有異步 返回一個函數 函數能接受dispath 在函數內部 作網絡請求 成功以後經過dispath手動的發送