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子对象无效（找到：具有键{type}的对象）。如果您要渲染子集合，请改用数组。

我不知道应该如何在reducer函数中返回状态。我应该返回<ul>中的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

由于您使用的是redux，因此您应该将您的react组件与Redux连接，以便您可以访问Redux State，即redux中的应用程序级电影状态。您的顶级js（app.js）还应实现商店提供程序以保存应用程序状态。

您应该尝试将app状态映射到props（mapStateToProps），并将元素设置为从props映射状态。

您可以find it here

提供一些好的参考资料

希望有所帮助

Answer 2

您无法发送给JSX。 Dispatch用于向redux发送信息，reducer和中间件捕获它，并返回将存储在redux中的数据。因此，在JSX中调度内容（在渲染的返回内）将导致错误。
我不知道如何在reducer函数中返回状态 Reducer与您的JSX无关。 Reducer返回将存储在store中的不可变状态值。您只能在使用this.props.state_variable_name将组件连接到商店后，使用connect()从商店访问这些数据。
我应该在函数中应用Redux Redux可以被视为应用程序的临时存储区域，您可以在其中监听这些数据对象中的更改的侦听器（您的组件）

我会说你应该听这个video来简单地理解redux，这是一个非常简单的概念。

对象作为React子项无效，Redux

2 个答案: