Объекты недопустимы в качестве дочерних элементов React, Redux

Question

У меня есть класс React Movie, который позволяет вам ввести movieName.Вы также можете просматривать все фильмы, которые вы ввели.

Я сейчас обновляю свое приложение с помощью Redux, но у меня возникает проблема, когда я хочу отобразить список.

Вот что уже работаетв 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'));

Это обновление, которое я пытаюсь реализовать и не работает:

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

Я получаю эту ошибку:

Объектынедопустимы как дочерний элемент React (найдено: объект с ключами {тип}).Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Я не знаю, как вернуть состояние в функции reducer. Должен ли явернуть <ul> in reducer?

Еще у меня возник вопрос: нужно ли применять Redux в таких функциях, как

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

и

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

?Как?

Answer 1

1. Невозможно отправить в JSX. Отправка используется для отправки информации в Redx, где она захватывается редукторами и промежуточным программным обеспечением, и которая возвращает данные, которые будут сохранены в Redux.Поэтому отправка чего-либо в JSX (внутри возврата вашего рендера) вызовет ошибку.

2. Я не знаю, как вернуть состояние в функции редуктора Редуктор не имеет ничего общего с вашим JSX.Редуктор возвращает значения неизменного состояния, которые будут храниться в хранилище.Доступ к этим данным из хранилища возможен только с помощью this.props.state_variable_name после подключения компонента к хранилищу с помощью connect().

3. если я применю Redux в функциях Redux можетбудет рассматриваться как область временного хранения для вашего приложения, где у вас есть слушатели (ваши компоненты), которые прослушивают изменения в этих объектах данных

Я бы сказал, что вы должны слушать это видео , чтобы иметь краткое представление о редуксе легко, это очень простая концепция.

Answer 2

, так как вы используете redux, вы должны соединить ваш реагирующий компонент с Redux, чтобы вы могли получить доступ к Redux State, то есть состоянию фильма на уровне приложения в redux.В вашем js (app.js) верхнего уровня также должен быть реализован поставщик магазина для сохранения состояния приложения.

Вам следует попытаться сопоставить состояние приложения с props (mapStateToProps) и настроить элемент для сопоставления состояния с props,

хороший справочник, который вы можете найти здесь

Надеюсь, это поможет