Using a state variable in the redux store as a dependancy in a useEffect hook

Viewed 57

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

0 Answers
Related