title: Redirect automatically from one component to another one after few seconds - react
body: <p>I try to redirect the user from one component to another after a few seconds.</p>
  
  <p>The user lands on a page and after few second he is automatically redirect to another page.
  I thought to redirect in an action but I am not sure if it is the best idea (if you have easier way to do it I am interested).</p>
  
  <p>My code so far:</p>
  
  <p>a basic component:</p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { withRouter } from "react-router-dom";
  import { redirectToProfile } from "../../actions/searchActions";
  
  class Search extends Component {
    componentDidMount() {
      setTimeout(this.props.redirectToProfile(this.props.history), 3000);
    }
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;search page&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default connect(
    null,
    { redirectToProfile }
  )(withRouter(Search));
  </code></pre>
  
  <p>and the action:</p>
  
  <pre><code>export const redirectToProfile = history =&gt; {
    history.push("/");
  };
  </code></pre>
  
  <p>So far I have an error message: </p>
  
  <blockquote>
    <p>Actions must be plain objects. Use custom middleware for async actions. </p>
  </blockquote>
  
  <p>After some research I see that some people resolve the problem with the middleware thunk but I am already using it so I don't know what to do.
  Thank you for your help.</p>