react高階組件，集成redux，異步action，logger中間件

分享解決問題：

1. react高階組件的兩種實現方式   
2. 如何經過redux來實現數據雙向綁定   
3. redux的異步數據流如何實現   
4. redux中間件如何實現並介入   
5. dva的@connect裝飾器，如何用高階組件+redux來實現   
複製代碼

目的：

1.簡單集成redux，瞭解redux數據流，中間件簡單實現並接入   
2.高階組件的應用場景：   
    2.1 屬性代理   
    2.2 反向繼承   
3.如何使用高階組件實現redux的connect   
4.整合rxjs寫一個高階組件爲wappedComponent增長拖拽功能   
複製代碼

準備工做：

1. npx create-react-app redux-demo搭建的項目   
2. 開發容器組件：APP.js   
3. 開發展現組件：avatar.js   
複製代碼

一. 集成react-redux維護數據源:

npm install --save redux   
npm install --save react-redux   
複製代碼

整合redux：gitbook

Redux的搭建步驟：

1. 安裝依賴 npm install —save redux react-redux
2. 入口文件配置
	import { Provider } from 'react-redux'
	import { createStore } from 'redux'
	import reducers from './redux/reducers'
	import initState from './redux/initState'
	
	let store = createStore(reducers, initState);
	ReactDom.render(
		<Provider store={store}>
        			<App />
    		</Provider>,
		document.getElementById(‘root’)
	)
3. connect鏈接，注入props
    import { connect } from 'react-redux'
    export default connect(({ ds }) => ({
        ds: ds
    }))(App);
複製代碼

Redux的異步action處理：請看 redux/reducers.js下的 postReducer

Redux的applyMiddleware中間件logger接入：

import { createStore, applyMiddleware } from 'redux'   
let store = createStore(Reducers, initState, applyMiddleware(logger));   
複製代碼

logger的實現參考middleware/logger.js
複製代碼

二. babel decorator集成

1. \node_modules\babel-preset-react-app\create.js 中找到plugins添加對decorator支持
      [
        require('@babel/plugin-proposal-decorators').default,
        { legacy: true },
      ]
複製代碼

這樣就支持了裝飾器模式   
複製代碼

demo地址：redux-demo