Question

假设我的主页在没有用户登录时呈现所有帖子的供稿，否则呈现与已登录用户相关的帖子供稿。使用Flux，我只需要一个函数

getNewFeedPosts(){
  this.setState({posts: []});
  ajaxFetchPostsFromServer();
}

将其添加为会话商店的监听器。我也有一个函数正在监听我的帖子商店，一旦他们回来响应ajaxFetchPostsFromServer被调用，就会将状态设置为新帖子。

使用连接器和提供程序在Redux中执行此操作的最佳实践方法是什么？

目前我有一个Feed容器：

const mapStateToProps = (state) => ({
    tweets: state.tweets,
});

const mapDispatchToProps = (dispatch) => ({
    getTweets: (currUserId) => {
        return dispatch(fetchAllTweets(currUserId));
    }
});

const FeedContainer = connect(mapStateToProps, mapDispatchToProps)(Feed);

饲料：

class Feed extends React.Component { 
    constructor(props) {
        super(props);
    }
    componentWillMount(){
        this.props.getTweets();
    }
    render(){
        const tweets = this.props.tweets;
        const originalTweetIds = Object.keys(tweets);
        return (
                <div>
                    <ul>
                        {   originalTweetIds.map((originalTweetId) => {

                            return (
                                <li key={originalTweetId}>
                                    {post info goes here}
                                </li>);
                        })}
                    </ul>
                </div>
        )
    }
};

1）现在我在Feed即将安装时调用getTweets，但是如果我在另一个组件中更改会话状态，则Feed无法更改，我想因为它不是重新安装，所以我应该怎么做才能让它改变。

2）在getTweets的实际情况中，在我发出ajax请求之前，我想在我的商店中设置推文到[]以防止来自上一页的推文（比如在我登录之前）从页面上留下直到响应用适当的推文回来。实现这一目标的最佳做法是什么？

非常感谢所有输入：）

Answer 1

1）现在我在Feed即将挂载时调用getTweets，但如果我在其他组件中更改会话状态，则Feed不会更改，我想因为它不会重新挂载，所以我应该怎么做这使它改变。

当您“更改会话状态”时，您需要从其他组件中调用dispatch(fetchAllTweets(currUserId))。它会在Feed更新后立即更新您的state.tweets组件。

2）在getTweets的实际情况中，在我发出ajax请求之前，我想在我的商店中设置推文到[]以防止来自上一页的推文（比如在我登录之前）从页面上留下来直到响应用适当的推文回来。实现这一目标的最佳做法是什么？

您可以将mapDispatchToProps更改为：

const mapDispatchToProps = (dispatch) => ({
    getTweets: (currUserId) => {
        dispatch(clearTweets());
        return dispatch(fetchAllTweets(currUserId));
    }
});

创建一个动作创建者：

const clearTweets = () => ({ type: 'CLEAR_TWEETS' });

在更新tweets状态的reducer中，您可以执行以下操作：

switch (action.type) {
    case 'CLEAR_TWEETS':
        return [];
    // other actions
}

如果改变状态应该相对于通量在redux中精确地重新渲染？

1 个答案: