Question

我正在努力将Redux与已经完成的SPA与ReactJS集成。

在我的主页上，我列出了4个最新的集合，这些集合在渲染时，我从数据库中获取axios。然后将它们保存在Redux Store中并显示在React UI上。

我的mapStateToProps看起来像这样：

const mapStateToProps = (state) => ({
credentials: credentials(state),
collections: collections(state)
});

凭据不相关且集合是：

const collections = (state) => {
if (state.collectionsHomeViewReducer.fetching === true) {
    return {
        fetchingCollections: true
    }
}
else if (state.collectionsHomeViewReducer.data) {
    const response = state.collectionsHomeViewReducer.data;
    return {
        collections: response.collections,
        fetchedCollections: true,
        fetchingCollections: false
    }
}
else if (state.collectionsHomeViewReducer.fetched === false) {
    return {
        fetchedCollections: false,
        fetchingCollections: false
    }
}
};

我想做什么： 每当另一个客户端或当前客户端添加新集合时，更新存储状态。此外，我不希望UI在我发送（动作）后立即更新，我希望它在用户刷新页面时更新，或者当他导航到另一个视图并返回时（我相信我想说的是调用componentDidMount时。）

到目前为止我取得了哪些成就： 通过使用socket.io，我

socket.emit("updateCollectionsStore")
socket.on("updateCollectionsStore")

和

socket.broadcast.emit("updateCollectionsStore")

在申请中各自的位置。

的最后一次召唤

socket.on("updateCollectionsStore")

广播之后，是在页面的主文件中，app.jsx也是商店所在的位置。那里的功能看起来像这样：

socket.on("updateCollectionsStore", () => {
store.dispatch(getCollectionsHomeView());
});

从Redux Dev Tools查看，商店已更新，一切正常。

我似乎无法弄清楚的是告诉道具不要因为每次调度动作时调用mapStateToProps而改变。

为什么我需要这个： HomePage可以处理连续的UI更新和数据提取，但我也有一个页面ReadAllPage，您可以在其中实现所有集合。问题是如果在顶部总会有最新的帖子，每当添加新的帖子时，当前的帖子都会向下推。如果有人想要点击被推下的那个，现在他可能不小心点击了取代它的那个，这是不想要的。

为了达到我想要的效果，我还应该做些什么或者做些什么？

谢谢。

Answer 1

根据您的需要，我会在州内拥有两处房产。首先是HomeView上当前可见，第二个是通过套接字更新。用户导航到HomeView后，您只需将第一个集合替换为第二个集合即可。

与Redux Update仅反应状态

1 个答案: