I have a useEffect() hook that I'd like to only update when the data in a state-full array changes. I know I can add that array as a dependency, but my issue is the array is not declared in the same file, it's coming from a redux store. Right now I removed the dependency and It works, but the dev tools show me that it is constantly sending new requests to the server when it should send a request only when submitted.
This is the function in the redux store:
/client/src/store/utils/thunkCreators.js
export const fetchConversations = () => async (dispatch) => {
try {
const { data } = await axios.get("/api/conversations");
dispatch(gotConversations(data));
} catch (error) {
console.error(error);
}
};
How do I import the conversations from the redux store as a dependency?
Home.js
useEffect(() => {
fetchConversations();
},[X]);
/client/src/store/utils/conversations.js
const GET_CONVERSATIONS = "GET_CONVERSATIONS";
export const gotConversations = (conversations) => {
return {
type: GET_CONVERSATIONS,
conversations,
};
};
const reducer = (state = [], action) => {
switch (action.type) {
case GET_CONVERSATIONS:
return action.conversations;
case SET_MESSAGE:
return addMessageToStore(state, action.payload);
case ADD_ONLINE_USER: {
return addOnlineUserToStore(state, action.id);
}
case REMOVE_OFFLINE_USER: {
return removeOfflineUserFromStore(state, action.id);
}
case SET_SEARCHED_USERS:
return addSearchedUsersToStore(state, action.users);
case CLEAR_SEARCHED_USERS:
return state.filter((convo) => convo.id);
case ADD_CONVERSATION:
return addNewConvoToStore(
state,
action.payload.recipientId,
action.payload.newMessage
);
default:
return state;
}
};