redux

redux默認只處理同步，異步任務需要react-thunk中間件.

使用redux devTool

在chrome中調試redux,需要使用redux devTools,安裝以後，在index.js中配置並使用。

配置方法：

import { createStore,applyMiddleware,compose } from 'redux';
import thunk from 'redux-thunk';
const reduxDevTool = window.devToolsExtension?window.devToolsExtension():()=>{}

const store = createStore(reduce函數,compose(
    applyMiddleware(thunk),
    reduxDevTool
))

使用react-redux

安裝react-redux

npm i react-redux --save

react-redux提供兩個新的接口，分別是：Provide和connect。這時候，我們就不用再管subscribe函數了，就只需要在乎reducer，action ,和 dispatch。

Provide組件在應用最外層

傳入store即可，只用一次。不用subscribe.

在connect中傳遞參數。

connect負責從外部獲取組件需要的參數connect可以用裝飾器的方式來寫。
connect中是可以傳遞4個參數的，但是有兩個比較重要。
一個是mapStatetoprops,把state傳遞進去。
一個是actionCreator,把reducer中的所有函數傳入。

最後connect導出一個新的組件。

const mapStatetoProps = (state)=>{
   return {num:state}
}
const actionCreator = {AddNum,MultipleNum,addAsync};
 App = connect(mapStatetoProps,actionCreator)(App)
export default App;

使用裝飾器優化代碼

npm run eject  //彈出各項配置
npm i babel-plugin-transform-decorators-legacy --save-dev

@connect(
    // 你要state什麼屬性放到props裏
    state=>({num:state}),
    // 你要什麼方法,放到props裏,自動dispatch
    {AddNum,MultipleNum,addAsync},
    // mapStatetoProps,actionCreator
)

redux中間件

爲解決異步操作而生。