Где в приложении redux-реагировать я бы включил свой компонент представления с сохранением состояния? В папке компонентов или контейнеров? - PullRequest
Новая
       8

Где в приложении redux-реагировать я бы включил свой компонент представления с сохранением состояния? В папке компонентов или контейнеров?

0 голосов
/ 30 апреля 2018

Компонент поиска: 

import React from "react";
import SearchResults from "../SearchResults";
import PropTypes from "prop-types";

class Search extends React.Component {
  state = {
    value: ""
  };

  handleChange = event => {
    let value = event.target.value;
    this.setState({ value });
    this.props.performSearch(value);
  };

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

  render() {
    return (
      <div>
        <h1>The Guardian Search App</h1>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </form>
        <div>
          <SearchResults articles={this.props.articles} />
        </div>
      </div>
    );
  }
}

Search.propTypes = {
  performSearch: PropTypes.func,
  articles: PropTypes.array
};

export default Search;

Контейнер для поиска: 

import React from "react";
import Search from "../../components/Search";
import { API_KEY } from "../../../config";

import fetchArticles from "../../api";

class SearchContainer extends React.Component {
  state = {
    articles: []
  };

  performSearch = event => {
    return fetchArticles(event).then(data =>
      this.setState({ articles: data.response.results })
    );
  };

  render() {
    return (
      <Search
        performSearch={this.performSearch}
        articles={this.state.articles}
      />
    );
  }
}

export default SearchContainer;

В настоящее время я пытаюсь разобраться с редуксом, поэтому перевожу его в версию реаги-редукса. У меня есть поисковый контейнер, с помощью которого я делаю mapStateToProps и скоро напишу также mapDispatchToProps. Но если мой компонент поиска также включает состояние, нужно ли мне тогда создать другой контейнер поиска, чтобы сопоставить его состояние с реквизитами?

1 Ответ

0 голосов
/ 30 апреля 2018

Состояние, требуемое в вашем Search компоненте, напрямую связано и требуется для элемента input, который вы визуализировали как дочерний. Поэтому состояние value в компоненте Search должно оставаться внутри компонента и не должно быть связано с Redux.

Не существует «правильного» способа сделать это, в основном предпочтения и шаблон дизайна. Поскольку в компоненте Search есть состояние, которое вы не хотите связывать с Redux, я бы подключил компонент SearchContainer в ваше хранилище Redux для предоставления массива объектов article, которые затем можно передать в базу Search компонент в качестве опоры и оставьте этот компонент совершенно не подозревая, что Redux даже существует.

...