react-redux中connect的裝飾器用法@connect詳解
最近在琢磨react中的一些小技巧，這篇文章記錄一下在redux中用裝飾器來寫connect。
通常我們需要一個reducer和一個action，然后使用connect來包裹你的Component。假設(shè)你已經(jīng)有一個key為main的reducer和一個action.js. 我們的App.js一般都這么寫：
import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'
class App extends React.Component{
render(){
return <div>hello</div>
}
}
function mapStateToProps(state){
return state.main
}
function mapDispatchToProps(dispatch){
return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)
ok了，這樣并沒有什么問題。看著connect的用法，有沒有覺得很熟悉？典型的wrapper嘛，這里必須拿裝飾器來裝一波啊，稍微改改：
import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'
@connect(
state=>state.main,
dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
render(){
return <div>hello</div>
}
}
裝完了，看起來舒服了。在我們實(shí)際項(xiàng)目中，可能是一個模塊下面又有很多個小組件，它們都共用同樣的action和reducer，我們在每個組件中都這么寫，是不是有點(diǎn)太麻煩了？冗余代碼太多了。
其實(shí)是可以把connect抽取出來的，比如寫一個connect.js:
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'
export default connect(
state=>state.main,
dispatch=>bindActionCreators(action,dispatch)
)
然后在需要用到的組件中這么用：
import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'
@connect
export default class App extends React.Component{
render(){
return <div>hello</div>
}
}
這樣就ok了，和最開始的用法比起來，是不是明顯更裝逼更好用？
需要說明的是，這里用了裝飾器，需要安裝模塊babel-plugin-transform-decorators-legacy，然后在babel中配置：
{
"plugins":[
"transform-decorators-legacy"
]
}
如果你用的是vscode, 可以在項(xiàng)目根目錄下添加jsconfig.json文件來消除代碼警告：
{
"compilerOptions": {
"experimentalDecorators": true
}
}
ok了，到這里真的完了。其實(shí)關(guān)于connect，是可以繼續(xù)琢磨的，比如可以寫一個通用的connect，所有的模塊中所有的組件都可以用的那種，本文就不繼續(xù)寫下去了，以后有機(jī)會再寫。
我一直覺得js里面把@ 這玩意兒叫裝飾器不好，太難聽了，像java那樣，叫注解多好。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件
這篇文章主要為大家介紹了react?+?vite?+?ts項(xiàng)目中優(yōu)雅使用.svg文件,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容
本文介紹了如何模仿抖音發(fā)布頁面,使用div元素作為輸入框,并利用CSS樣式和JavaScript動態(tài)操作DOM,實(shí)現(xiàn)類似于input輸入框的功能,感興趣的朋友跟隨小編一起看看吧2024-10-10
React 進(jìn)入頁面后自動 focus 到某個輸入框的解決方案
React.js 當(dāng)中提供了 ref 屬性來幫助我們獲取已經(jīng)掛載的元素的 DOM 節(jié)點(diǎn),你可以給某個 JSX 元素加上 ref屬性,這篇文章主要介紹了React 進(jìn)入頁面以后自動 focus 到某個輸入框,需要的朋友可以參考下2024-02-02
React實(shí)現(xiàn)表單提交防抖功能的示例代碼
在 React 應(yīng)用中,防抖（Debounce）技術(shù)可以有效地限制函數(shù)在短時(shí)間內(nèi)的頻繁調(diào)用,下面我們就來看看如何使用Lodash庫中的debounce函數(shù)實(shí)現(xiàn)React表單提交中實(shí)現(xiàn)防抖功能吧2024-01-01
React路由看似只能由Route組件包裹組件的結(jié)構(gòu)來構(gòu)成,但是其實(shí)也可以通過編寫路由數(shù)組配置然后通過數(shù)組循環(huán)來生成Route組件包裹組件的結(jié)構(gòu),所以本文給大家介紹了React根據(jù)配置生成路由的方法,需要的朋友可以參考下2024-11-11
react-router-domV6版本的路由和嵌套路由寫法詳解
本文主要介紹了react-router-domV6版本的路由和嵌套路由寫法詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
React中使用echarts-for-react的方法示例
echarts-for-react則是ECharts在React生態(tài)中的官方封裝組件,它讓開發(fā)者能夠輕松地在React應(yīng)用中集成ECharts圖表,本文就來介紹一下echarts-for-react的使用,感興趣的可以了解一下2025-03-03
react的ui庫antd中form表單使用SelectTree反顯問題及解決
這篇文章主要介紹了react的ui庫antd中form表單使用SelectTree反顯問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
React 組件的重復(fù)渲染是開發(fā)中常見的性能問題之一,尤其是在大型應(yīng)用中,組件的頻繁渲染會導(dǎo)致性能瓶頸,本文將探討 React 組件重復(fù)渲染的常見原因,并提供優(yōu)化策略,幫助開發(fā)者提升應(yīng)用性能,需要的朋友可以參考下2025-03-03
眾所周知?,在業(yè)務(wù)開發(fā)中,無論用的什么框架,首先要熟悉項(xiàng)目搭建,路由配置和組件通信,所以我們今天要探究的就是React中組件通信的幾種方式,快跟隨小編一起學(xué)習(xí)起來吧2024-03-03