我应该在 redux-react 应用程序的哪个位置包含有状态的展示组件？在组件或容器文件夹中？

Posted 2023-02-22

【中文标题】我应该在 redux-react 应用程序的哪个位置包含有状态的展示组件？在组件或容器文件夹中？

【英文标题】：Where in redux-react app would I include my stateful presentational component? In components or containers folder?

【发布时间】：2018-10-10 15:11:42

【问题描述】：

搜索组件：

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;

我目前正在尝试了解 redux，因此将其转换为 react-redux 版本。我有一个搜索容器，我正在执行 mapStateToProps 并且很快也会编写 mapDispatchToProps。但是，如果我的 Search 组件还包含状态，那么我是否会执行另一个 Search Container 来将其状态映射到 props？

【参考方案1】：

Search 组件中所需的状态直接链接并由您作为子级呈现的 input 元素所要求。因此，Search 组件中的value 状态应该留在组件内，不与 Redux 关联。

没有“正确”的做法，主要是偏好和设计模式。由于您在 Search 组件中有不想与 Redux 关联的状态，因此我会将 SearchContainer 组件挂接到您的 Redux 存储中，以提供文章对象数组，然后可以将其传递给基础 @ 987654327@ 组件作为道具，让该组件完全不知道 Redux 甚至存在。