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中间件

为解决异步操作而生。