Objects are not valid as a React child, Redux

Question

I have a React Movie class that let you input a movieName . You can also view all the movies you entered.

I am now updating my app with Redux but I am having a problem when I want to display the list.

Here is what is already working in React:

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
     state = {
      favorite: false,
      movieName: "",
      movies: [],
      filter: true,
    };

  handleChange = (event) => {
    event.target.name === "favorite"
      ? this.setState({[event.target.name]: event.target.checked})
      : this.setState({[event.target.name]: event.target.value});
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.addMovie();
  }

  addMovie = () =>{
    this.setState({
      movies: [...this.state.movies, {name: this.state.movieName, favorite: this.state.favorite }]
    });
  }

  listFavoriteMovies = () => (
      <ul>
        {this.state.movies
        .filter( movie => movie.favorite )
        .map( movie => <li>{movie.name}</li>)}
      </ul>
    );

    listAllMovies = () => (
      <ul>
        {this.state.movies
          .map(movie => <li>{movie.name}</li>)}
      </ul>
    );

  changeFilter = () =>
    this.setState( prevState => ( {
      filter: !prevState.filter,
    }))


  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Movie name:
            <input name="movieName" type="text" onChange={this.handleChange} />
            Favorite?
            <input name="favorite" type="checkbox" onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <ul>
          {
            this.state.filter
            ? this.listFavoriteMovies()
            : this.listAllMovies()
            }
        </ul>
        <button onClick={this.changeFilter}>Click toggle for all/favorites.</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

This is the update I am trying to implement and is not working:

listAllMovies = () => (//
  <ul>
      {this.props.dispatch({ type: 'LIST_ALL_MOVIES' })}
  </ul>
);

I get this error:

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.

I don't know how should I return the state in the reducer function. Should I return the <ul> in reducer ?

Another question I have: should I apply Redux in functions like

  handleChange = (event) => {//?
    event.target.name === "favorite"
      ? this.setState({[event.target.name]: event.target.checked})
      : this.setState({[event.target.name]: event.target.value});
  }

and

  changeFilter = () => //
    this.setState( prevState => ( {
      filter: !prevState.filter,
    }))

? How?

Answer 1

since you are using redux, you should connect your react component with Redux so that you can access Redux State, ie the app level movie state in redux. Your top level js (app.js) should also implement store provider to save the app state.

You should try to map the app state to props (mapStateToProps), and set the element to map the state from props.

some good reference you can find it here

Hope it helps

Answer 2

1. You cannot dispatch to JSX. Dispatch is used to send information to redux, where it is captured by reducers and middleware and that returns a data which will be stored in redux. So dispatching something in JSX(inside the return of your render) will cause error.

2. I don't know how should I return the state in the reducer function Reducer has nothing to do with your JSX. Reducer returns immutable state values which will be stored in store. You an only access these data from the store using this.props.state_variable_name after connecting your component to store using connect() .

3. should I apply Redux in functions Redux can be considered as a temporary storage area for your application, where you have listeners(your components) who listen to changes in these data objects

I would say you should listen to this video to have a brief understanding of redux easily, it a very simple concept.