Question

我非常感谢您在策略上的帮助。在我的react / redux应用程序中，我有一个消息数组列表，当单击单个消息时，我转到一个组件，该组件采用该消息的id参数并从数据库中获取它。问题是每次我单击一条消息时，都会在存储更新之前显示旧的redux存储消息一秒钟。

我唯一的解决方法是在componentDidUnmount中调度一个操作以清除存储。这是处理此问题的最佳策略吗？我想到的唯一另一种方法是，不用为单个消息访问数据库，而是使用过滤器遍历redux存储数组，以提取与params id匹配的帖子。这是否太“繁重”而无法遍历所有对象，还是我最好选择数据库？这是一个问题，如果有人首先加载单个消息页面而没有访问“提要”，并且存储数组将为空...

这是我的组件：

class Post extends Component {

componentDidMount() {
  const id = this.props.match.params.id;
  this.props.startGetPost(id);
}

componentWillUnmount() {
  this.props.getPost({});  
}

  render() {

    const { post, loading } = this.props.post;
    let postContent;


    if (loading) {
      postContent = <Spinner />
    }

    if (post && post) {
      postContent = (
        <div>
        <PostItem post={post} />
        <CommentForm postId={post._id} />
        </div>
      )
    }

Answer 1

在减速器中，由于数据来自API，因此您需要为loading状态指定一个标志。

在您的容器中，您必须使用loading的{{1}}向组件提供react-redux标志，一旦组件可以访问connect道具，您就可以用它来检查您的数据是否还没有准备好，并向您的用户提供一些反馈。

通常，异步操作涉及3个Redux操作，这些操作代表提取来的数据。就您而言，您将执行以下操作：

loading

在化简器中，您可以操纵状态来处理这些操作，在获取时将- GET_MESSAGE_FETCHING - GET_MESSAGE_SUCCESS - GET_MESSAGE_FAIL切换到loading，在成功或失败时切换true。

希望有帮助！

Redux存储延迟

1 个答案: