Redux 过滤电影列表容器

本文将介绍如何使用 Redux 过滤电影列表容器。我们将使用 React 和 Redux 构建一个电影列表应用程序。该应用程序将从一个 API 中获取数据，并渲染成一个电影列表。我们将添加一个过滤器，用户可以根据电影名称来过滤电影列表。

技术栈

我们将使用以下技术栈来完成这个应用程序：

• React：构建整个应用程序的 UI 组件。
• Redux：管理应用程序的状态。
• Redux Thunk：允许我们在 Redux 中执行异步操作。
• Axios：从 API 中获取数据。

设计

我们的应用程序将包括以下组件：

• MovieList：渲染电影列表。
• MovieItem：渲染单个电影的详细信息。
• Filter：渲染过滤器表单。
• App：将所有组件集成到一个容器中。

设置 Redux

在我们开始编写代码之前，我们需要设置 Redux。

我们将创建以下三个 Redux 动作：

• fetchMovies：从 API 中获取所有电影。
• setMovies：将电影存储在 Redux store 中。
• filterMovies：过滤电影列表。

我们将创建以下三个 Redux reducer：

• isLoading：检查是否正在从 API 中获取数据。
• movies：存储电影列表。
• filter：存储过滤器表单的值。

我们将在 store 中引入 Redux Thunk 中间件，允许我们执行异步操作。

编写组件

现在我们已经设置好了 Redux，我们可以开始编写组件了。我们将逐一介绍如何编写这些组件。

MovieList 组件

MovieList 组件将渲染电影列表。如果电影列表尚未加载，它将显示一个加载动画。如果电影列表为空，它将显示一个无电影的消息。

import React from "react";
import { connect } from "react-redux";
import MovieItem from "./MovieItem";

const MovieList = ({ isLoading, movies }) => {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!movies.length) {
    return <div>No movies available.</div>;
  }

  return (
    <div>
      {movies.map((movie) => (
        <MovieItem key={movie.id} movie={movie} />
      ))}
    </div>
  );
};

const mapStateToProps = (state) => ({
  isLoading: state.isLoading,
  movies: state.movies,
});

export default connect(mapStateToProps)(MovieList);

MovieItem 组件

MovieItem 组件将渲染单个电影的详细信息。

import React from "react";

const MovieItem = ({ movie }) => (
  <div>
    <h2>{movie.title}</h2>
    <p>{movie.plot}</p>
  </div>
);

export default MovieItem;

Filter 组件

Filter 组件将渲染过滤器表单。它将根据用户的输入更新 Redux store 中的 filter 值。

import React from "react";
import { connect } from "react-redux";
import { filterMovies } from "../actions/actions";

const Filter = ({ filter, filterMovies }) => (
  <form>
    <label>
      Filter movies by title:
      <input
        type="text"
        value={filter}
        onChange={(e) => filterMovies(e.target.value)}
      />
    </label>
  </form>
);

const mapStateToProps = (state) => ({
  filter: state.filter,
});

const mapDispatchToProps = {
  filterMovies,
};

export default connect(mapStateToProps, mapDispatchToProps)(Filter);

App 组件

App 组件将将所有组件集成到一个容器中，并通过 Redux store 获取电影列表。

import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchMovies, setMovies } from "../actions/actions";
import MovieList from "./MovieList";
import Filter from "./Filter";
import axios from "axios";

class App extends Component {
  componentDidMount() {
    this.props.fetchMovies();
    axios
      .get("url/to/api")
      .then((response) => {
        this.props.setMovies(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <Filter />
        <MovieList />
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  filter: state.filter,
});

const mapDispatchToProps = {
  fetchMovies,
  setMovies,
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

调试

我们可以使用 Redux DevTools Extension 来调试 Redux store。在创建 store 时添加以下代码即可启用该功能：

const store = createStore(
  rootReducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

现在，当我们在应用程序中更改状态时，将在 Redux DevTools 中显示这些更改。

结论

现在我们已经成功地构建了一个电影列表应用程序，并添加了一个过滤器。我们学习了如何使用 React、Redux 和 Redux Thunk，以及如何编写组件和调试 Redux store。我希望这篇文章能够帮助你更好地理解 Redux，并教你如何在应用程序中使用它。