CODEWITHSUNDEEP
reactjsredux
Valentin Constanda
Valentin Constanda

Reputation: 139

React with Redux Update only state

I'm working on integrating Redux in an already finished SPA with ReactJS.

On my HomePage I have a list of the 4 newest collections added which on render, I fetch with axios from my database. These are then saved in Redux Store and displayed on the React UI.

My mapStateToProps look something like this: 

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

Where credentials is irrelevant and collections is:

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
    }
}
};

What is it I want to do: Update the store state every time another client, or the current client, adds a new collection. Moreover, I do not wish for the UI to update immediately after I dispatch(action), I want it to update when a user refreshes the page or when he navigates to another view and returns ( I believe what I'm trying to say is when componentDidMount is called ).

What have I achieved so far: By using socket.io, I 

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

and

socket.broadcast.emit("updateCollectionsStore")

in their respective places in the application. The final call of 

socket.on("updateCollectionsStore")

after the broadcast, is in the main file of the page, app.jsx where the store is also located. The function there looks like this:

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

The store is updated and everything works fine, as viewed from the Redux Dev Tools.

What I can't seem to figure out is to tell the props not to change due to the fact that mapStateToProps is called every time an action is dispatched.

Why do I need this: The HomePage can deal with a continuous UI update and data fetching but I also have a page ReadAllPage where you can real all collections. The problem is if there will always be the newest post on the top, whenever a new one is added, the current one is pushed downwards. In case somebody had the intent to click the one that was pushed down, now he might have accidentally clicked the one that took its place, which is not wanted.

What else should I do different or further to achieve the result I want?

Thank you.

Upvotes: 0

Views: 175

Answers (1)

Alexander Bykov
Alexander Bykov

Reputation: 219

According to your needs, I would have two properties in the state. First is that is currently visible on the HomeView and the second is that is updated via sockets. Once a user navigates to the HomeView you can just replace the first collection with the second one.

Upvotes: 0

Related Questions