How to use the decorator of connect in react-redux

This article mainly introduces the detailed explanation of @connect decorator usage in react-redux. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

I have been thinking about some tips in react recently. This article records how to use decorators to write connect in redux.

Usually we need a reducer and an action, and then use connect to wrap your Component. Assume that you already have a reducer with the key as main and an action.js. Our App.js is generally written like this:

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 <p>hello</p>
  }
}
function mapStateToProps(state){
  return state.main
}
function mapDispatchToProps(dispatch){
  return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)

ok, there is no problem with this . Looking at the usage of connect, do you feel familiar? It’s a typical wrapper. I have to use a decorator to decorate it here. I changed it a little:

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 <p>hello</p>
  }
}

After the decoration, it looks comfortable. In our actual project, there may be many small components under one module, and they all share the same action and reducer. Is it a bit too troublesome to write this in each component? There is too much redundant code.

In fact, you can extract connect. For example, write a 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)
)

and then use it in the components that need to be used:

import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'

@connect
export default class App extends React.Component{
  render(){
    return <p>hello</p>
  }
}

That’s ok. Compared with the initial usage, isn’t it obviously more pretentious and easier to use?

It should be noted that decorators are used here, and the module babel-plugin-transform-decorators-legacy needs to be installed and then configured in babel:

{
  "plugins":[
    "transform-decorators-legacy"
  ]
}

If you are using vscode, you can add the jsconfig.json file in the project root directory to eliminate code warnings:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

ok, it’s really over here. In fact, you can continue to think about connect. For example, you can write a universal connect that can be used by all components in all modules. I will not continue writing this article. I will write it again when I have the opportunity.

I have always felt that it is not good to call @ this thing in js a decorator. It sounds too ugly. It would be better to call it annotation like in java.

Related recommendations:

Detailed explanation of HttpURLConnection attachment upload in Java

MySQL database error: Too many connections solution

mysqli_connect’s 10 recommended content

The above is the detailed content of How to use the decorator of connect in react-redux. For more information, please follow other related articles on the PHP Chinese website!