与Redux更新状态反应

我正在将Redux与已完成的SPA与ReactJS集成。与Redux更新状态反应

在我的主页上我添加了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，我希望在用户刷新页面或导航到另一个视图并返回时更新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()); 
});

商店被更新，一切工作正常，从终极版开发工具查看。

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

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

我还应该做什么不同或进一步实现我想要的结果？

谢谢。

来源

2017-06-21 Valentin Constanda

根据您的需要，我会在该州有两个属性。首先是目前在HomeView上可见，第二是通过套接字更新。一旦用户导航到HomeView，您可以将第一个集合替换为第二个集合。

来源

2017-06-21 22:05:27

本质上，有一个更新标志告诉商店更新，当用户导航到页面X，对不对？而不是立即要求商店更新 –

与Redux更新状态反应

回答

相关问题