react项目用@connect装饰器

conncet是从react-redux中结构出来的一个装饰器，用来实现不同页面（或组件）的数据共享，避免组件间一层层的嵌套传值。

 

为何要使用@connect装饰器

在安装完redux,react-redux之后虽然可以轻松的完成数据共享，但是代码及其麻烦。
例如在index.js里这样写:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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里这样写：

?

1 2 3 4 5 6 7 8 9

//{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管理的数据共享:

?

1 2 3 4 5

//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”开头的一个对象,(一般在最后,),这是原始的样子:

?

1 2 3 4 5

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

　　

加入另外一项：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

　　

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

 

?

1	import {connect} from 'react-redux'

　　

然后使用@conncet装饰器:

?

1 2 3 4

//这里没用第二个参数，因为没有需要引入需要的函数 @connect(     state=>({abc:state}) )

　差不多就这样了。
虽然只有三步，但可能出现毛毛多的报错，如果遇到不会的可以给我留言，或者复制报错信息百度，都能解决。
再解决之后一定要记住解决的方法，我也不知道为什么要这样说，可能之后会再次遇到吧。