Rewrite redux dispatch function as component

Question

I got a dispatch function to save a name to Redux (Got most code from the redux docs).

But now I want to focus on the input on ComponentDidMount, but my SaveName function isn't a component but a dispatch function. How can I rewrite it so I can use componentDidMount?

My code:

import React from 'react';
import {connect} from 'react-redux';
import {saveName, feedbackInput} from '../actions/';
import { withRouter } from 'react-router-dom';

// http://redux.js.org/docs/basics/ExampleTodoList.html
let SaveName = ({ dispatch }) => {

  let input;
  return(
    <form id="name" onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(saveName(input.value))
        input.value = ''
      }}
    >
      <input type="text"
             name="text"
             onClick={e => {
                 e.preventDefault()
                 dispatch(feedbackInput(input.value))
               }}
             onChange={e => {
                 e.preventDefault()
                 dispatch(feedbackInput(input.value))
               }}
             ref={
             node => {
              input = node
                }
            } />
      <button className="submit-btn" type="submit"></button>
    </form>
  )
}

SaveName = withRouter(connect()(SaveName));

export default SaveName;

Answer 1

Rewrite your stateless component as stateful component and use ref that sets this.input to be ref value.

class SaveName extends React.Component {

  componentDidMount() {
    this.input.focus()
  }

  render() {
   const { dispatch } = this.props

  return(
    <form id="name" onSubmit={e => {
        const {input} = this
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(saveName(input.value))
        input.value = ''
      }}
    >
      <input type="text"
             name="text"
             ref={input => this.input = input}
             onClick={e => {
                 e.preventDefault()
                 dispatch(feedbackInput(this.input.value))
               }}
             onChange={e => {
                 e.preventDefault()
                 dispatch(feedbackInput(this.input.value))
               }}/>
      <button className="submit-btn" type="submit"></button>
    </form>
  )
}


export default withRouter(connect()(SaveName));

Answer 2

You can change it to a component.

import React from 'react';
import {connect} from 'react-redux';
import {saveName, feedbackInput} from '../actions/';
import { withRouter } from 'react-router-dom';

// http://redux.js.org/docs/basics/ExampleTodoList.html
class SaveName extends React.Component { 
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.dispatch(saveName('[YOUR_VALUE]'))
  }

  render() {

    return(
      // return your components
    )
  }
}

const SaveNameComponent = withRouter(connect()(SaveName));

export default SaveNameComponent;