title: Objects are not valid as a React child, Redux
body: <p>I have a React <code>Movie</code> class that let you input a <code>movieName</code>. You can also view all the movies you entered.</p>
  
  <p>I am now updating my app with Redux but I am having a problem when I want to display the list.</p>
  
  <p>Here is what is already working in React:</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  
  class App extends React.Component {
       state = {
        favorite: false,
        movieName: "",
        movies: [],
        filter: true,
      };
  
    handleChange = (event) =&gt; {
      event.target.name === "favorite"
        ? this.setState({[event.target.name]: event.target.checked})
        : this.setState({[event.target.name]: event.target.value});
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      this.addMovie();
    }
  
    addMovie = () =&gt;{
      this.setState({
        movies: [...this.state.movies, {name: this.state.movieName, favorite: this.state.favorite }]
      });
    }
  
    listFavoriteMovies = () =&gt; (
        &lt;ul&gt;
          {this.state.movies
          .filter( movie =&gt; movie.favorite )
          .map( movie =&gt; &lt;li&gt;{movie.name}&lt;/li&gt;)}
        &lt;/ul&gt;
      );
  
      listAllMovies = () =&gt; (
        &lt;ul&gt;
          {this.state.movies
            .map(movie =&gt; &lt;li&gt;{movie.name}&lt;/li&gt;)}
        &lt;/ul&gt;
      );
  
    changeFilter = () =&gt;
      this.setState( prevState =&gt; ( {
        filter: !prevState.filter,
      }))
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;label&gt;
              Movie name:
              &lt;input name="movieName" type="text" onChange={this.handleChange} /&gt;
              Favorite?
              &lt;input name="favorite" type="checkbox" onChange={this.handleChange} /&gt;
            &lt;/label&gt;
            &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
          &lt;ul&gt;
            {
              this.state.filter
              ? this.listFavoriteMovies()
              : this.listAllMovies()
              }
          &lt;/ul&gt;
          &lt;button onClick={this.changeFilter}&gt;Click toggle for all/favorites.&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>This is the update I am trying to implement and is not working:</p>
  
  <pre><code>listAllMovies = () =&gt; (//
    &lt;ul&gt;
        {this.props.dispatch({ type: 'LIST_ALL_MOVIES' })}
    &lt;/ul&gt;
  );
  </code></pre>
  
  <p>I get this error:</p>
  
  <blockquote>
    <p>Objects are not valid as a React child (found: object with keys {type}). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>
  
  <p><strong>I don't know how should I return the state in the <code>reducer</code> function.</strong> Should I return the <code>&lt;ul&gt;</code> in <code>reducer</code>?</p>
  
  <p>Another question I have:
  should I apply Redux in functions like </p>
  
  <pre><code>  handleChange = (event) =&gt; {//?
      event.target.name === "favorite"
        ? this.setState({[event.target.name]: event.target.checked})
        : this.setState({[event.target.name]: event.target.value});
    }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>  changeFilter = () =&gt; //
      this.setState( prevState =&gt; ( {
        filter: !prevState.filter,
      }))
  </code></pre>
  
  <p>? How?</p>