Refs, React and Redux

Refs, React and Redux.md

Refs, React and Redux

How to use Refs on diferentes escenarios and what to do when handling connected components to Redux

When working on a React & Redux project when have 3 diferents escenarios when using refs. But first...

What is it ?

Refs are a way of storing references to an object, these refenrences can be DOM nodes or class components. It provide a way to access DOM nodes or React elements created in the render method.

DOM elements

When the ref attribute is used on an HTML element, the ref created receives the DOM element as its current property.

class Video extends React.Component {
  state = {
   isPlaying: false,
  }
  
  handleVideoClick = () => {
    if (this.state.isPlaying) {
      this.video.pause()
    }
    else {
      this.video.play()
    }
    this.setState((state) => ({ isPlaying: !state.isPlaying }))
  }
  
  togglePlay = () => {
    this.handleVideoClick()
  }
  
  render() {
    return (
      <div>
        <video
          ref={video => this.video = video}
          onClick={this.handleVideoClick}
        >
         <source
            src="some.url"
            type="video/ogg"
         />
        </video>
      </div>
    )
  }
}

play() and pause() methods live on the HTML5 video element, in order to have access to these methods we need to create a ref to the video element.

Class components

When the ref attribute is used on an class component declaration, the ref created receives the class instance, having access to the component state and methods.

class Player extends React.Component {
  constructor(props) {
    super(props)
    this.videoComp = React.createRef()
  }

  componentDidMount() {
    this.videoComp.togglePlay()
  }

  render() {
    return (
      <Video ref={this.videoComp} />
    )
  }
}

Here we have access to the video component togglePlay method and we execute this from the parent component, we can eve read the state. Basically it give us access to the entire video class instance.

Connected components

What if the component we are trying to get the ref to is connected to a Redux store via the React-Redux connect(), Redux comes with a handy way to do this:

connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  { forwardRef: true }
)(MyComponent)

Then we can use refs like a normal React component. (react-redux >= v6.0)