connect () не работает в дочернем компоненте React Redux - PullRequest
0 голосов
/ 05 февраля 2020

У меня есть проект, который имеет несколько дочерних компонентов и настроен с помощью React Redux. У меня есть один из этих компонентов, который успешно обращается к моему магазину, но по какой-то причине этот дочерний компонент, похоже, не обращается к магазину, и в результате visibilityFilter не определен.

Кто-нибудь может увидеть, что я сделал не так? Это полный код компонента:

import React from "react";
import { Col, Row } from "react-bootstrap";
import { connect } from "react-redux";

//Import visibility filter component
import VisibilityFilterInput from "../visibility-filter-input/visibility-filter-input";

import { MovieCard } from "../movie-card/movie-card";

export function MoviesList(props) {
  const { movies, visibilityFilter } = props;
  let filteredMovies = movies;
  console.log(visibilityFilter);

  if (visibilityFilter !== undefined) {
    filteredMovies = movies.filter(m => m.Title.includes(visibilityFilter));
  }

  if (!movies) return <div className="main-view" />;

  return (
    <div className="movies-list">
      <Row>
        <VisibilityFilterInput visibilityFilter={visibilityFilter} />
      </Row>
      <Row>
        {filteredMovies.map(m => (
          <Col key={m._id}>
            <MovieCard key={m._id} movie={m} />
          </Col>
        ))}
      </Row>
    </div>
  );
}

//Lets say we want to subscribe to updates to movies and access the visibility filter action
let mapStateToProps = state => {
  return { visibilityFilter: state.visibilityFilter };
};

export default connect(mapStateToProps)(MoviesList);

...