About the usage of connect decorator in react-redux

This article mainly introduces the detailed usage of @connect decorator in react-redux. I will share it with you now and give it as a reference.

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. Suppose you already have a reducer with the key 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 install it here. I modified 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>
  }
}

It's finished and 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 the 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>
  }
}

This is OK Okay, compared to the original usage, is it obviously more pretentious and easier to use?

It should be noted that decorators are used here. You need to install the module babel-plugin-transform-decorators-legacy and then configure it 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 is better to call it annotation like in java.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed answer: What impact do changes in vue have on components?

How to package using Parcel

Detailed explanation of how to configure the packaging tool in Vue

In vue How to implement watch to automatically detect data changes

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