react項目用@connect裝飾器

conncet是從react-redux中結構出來的一個裝飾器，用來實現不同頁面（或組件）的數據共享，避免組件間一層層的嵌套傳值。

 

為何要使用@connect裝飾器

在安裝完redux,react-redux之后雖然可以輕松的完成數據共享，但是代碼及其麻煩。
例如在index.js里這樣寫:

import thunk from 'redux-thunk'
import {createStore,applyMiddleware,compose} from 'redux'
import {reducer} from './reducer/index.js'
import {Provider} from 'react-redux'
const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : ()=>{}
const store = createStore(
    reducer,
    compose(
        applyMiddleware(thunk),
        devToolsExtension
    )
)
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

　　上面這段代碼只是抽出了引用部分，表示如何在下載redux,redux-thunk(一個允許在redux里做異步操作的庫),react-redux的react項目里使用。
在App.js里這樣寫：

//{addNum,rmNum,removeAsync} 這部分是自定義的改變redux返回的state狀態的函數的引入，屬於業務需求部分
import {addNum,rmNum,removeAsync} from './reducer/index.js'
import {connect} from 'react-redux'
//然后把redux管理的狀態和自定義方法映射到App組件的this.props中去。
const mapStateToProps = (state) => {
    return {abc:state}
}
const mapDispatchToProps = {addNum,rmNum,removeAsync}
App = connect(mapStateToProps,mapDispatchToProps)(App)

　　然而，這並不是最簡潔和最順手的寫法，在最簡潔的寫法中你只需要如下代碼，就可以實現redux管理的數據共享:

//connect()里的第一個參數是一個函數，作用和上一段代碼的mapStateToProps作用相同，第二個參數是一個對象，可以傳入你需要共享的函數
@connect(
    state=>({abc:state}),
    {addNum,rmNum,removeAsync}
)

　　

雖然看上去也沒少多少，但這種寫法寫起來更加順手在很多組件都需要使用的時候可以減少更多代碼，這絕對是最快捷的方法，這里說的最快捷是指在使用redux和react-redux的情況下，如果有杠精非要說可以用hook實現數據共享，那你就去用hook吧，還看什么react-redux？
那么如何實現@connect裝飾器的使用呢？

1. 在命令行工具中使用 npm run eject。不熟的情況下可能會報錯，如果報錯的信息大概意思是：有些文件未被追蹤到，那么直接git add . 再 git commit -m""，或者直接在.gitignore中忽略這些文件(不建議)
2. npm run eject之后package.json中會出現很多依賴建議yarn/npm i 一下。
3. 然后打開package.json文件,找到“babel”開頭的一個對象,(一般在最后,),這是原始的樣子:

"babel": {
    "presets": [
      "react-app"
    ]
  }

　　

加入另外一項：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  }

　　

接着就可以在不同組件中引入：

 

import {connect} from 'react-redux'

　　

然后使用@conncet裝飾器:

//這里沒用第二個參數，因為沒有需要引入需要的函數
@connect(
    state=>({abc:state})
)

　差不多就這樣了。
雖然只有三步，但可能出現毛毛多的報錯，如果遇到不會的可以給我留言，或者復制報錯信息百度，都能解決。
再解決之后一定要記住解決的方法，我也不知道為什么要這樣說，可能之后會再次遇到吧。