redux-thunk和应用程序架构-希望仅在视图中呈现视图并在单独的组件中分派GET操作

Question

我在我的应用程序中使用react-redux和redux-thunk，我想做两件事：

1. 我希望能够在两个部分中共享GET请求的结果。我知道您可以通过将两个组件连接到商店来做到这一点，但是我想这样做，如果用户登陆X页面，那么Y页面就无法再次发出相同的GET请求（这两个组件是Thumbnail和Carousel）。换句话说，应该只发出一次GET请求（不能100％地确定redux-thunk的最佳实践），并且每个组件都应该能够访问存储并在组件中呈现结果（这很容易，我可以））>

2. 目前，GET请求是两个子视图组件的父，（我认为）这没有任何意义。我只想在父视图中呈现子视图组件，而不是GET请求。如果不清楚，则在下面阅读我的代码会更有意义

[这是父视图（Gallery），它具有一个子组件，该子组件将操作分发给redux（使用redux-thunk），从而制作一个API（FetchImages）：

import ...

export default function Gallery() {

  return(
    <>

      <GalleryTabs />
      <GalleryText />

      <div className="gallery-images-container">
        <FetchImages /> ----> this is making an API request and rendering two child view components
      </div>

    </>
  )  
}
这是FetchImages，它正在调度进行API调用的动作（fetchImages）

import ...

function FetchImages({ fetchImages, imageData }) {

  useEffect(() => {
    fetchImages()
  }, [])

    return imageData.loading ? (
      <h2>Loading</h2>
    ) : imageData.error ? (
      <h2>Something went wrong {imageData.error}</h2>
    ) : (
      <>
      <Thumbnail /> -----> these two are views that are rendered if GET request is successful
      <Carousel />
      </>
    )
}

const mapStateToProps = state => {
    return {
        imageData: state.images
    }
}

const mapDispatchToProps = dispatch => {  
    return {
        fetchImages: () => dispatch(fetchImages())
    }
}

export default connect(
  mapStateToProps, 
  mapDispatchToProps
  )(FetchImages)
我认为拥有这样的东西更有意义：

import ...

export default function Gallery() {

  return(
    <>

      <GalleryTabs />
      <GalleryText />

      <div className="gallery-images-container">
        <Thumbnail />  -----> Thumbnail should be rendered here but not Carousel ( FetchImages here adds unnecessary complexity )   
      </div>

    </>
  )  
}
tldr

1. 如果两个组件可以调度一个发出GET请求的操作，但是每次用户在网站上只能进行一次调度，可以遵循的最佳实践是什么？

2. 使用redux-thunk，有哪些最佳实践可用于分离关注点，以使子视图组件位于父视图组件内，而在子视图组件之间共享的更智能的组件（例如发出GET请求的分派动作）被分派当用户登陆页面而视图和更智能的组件没有直接在一起时？

我是菜鸟，谢谢您的帮助

我在应用程序中使用react-redux和redux-thunk，我想做两件事：我希望能够在两个组件中共享GET请求的结果。我知道您可以这样做...

Answer 1

您的第一个问题：组件容器应仅调度它需要数据的操作。如何在状态中存储异步结果以及如何从状态中处理结果在此答案中未涉及，但是后面的示例使用名为List的组件，该组件仅分派获取数据页，选择数据页并在UI中转储数据页。如果数据已经处于状态，则tunk操作会尽早返回。