Firefox can't dispatch and then refresh page but other browsers can

Question

I am using redux toolkit and I am dispatching a function using redux thunk. After I dispatch this particular function I was just forcing a page refresh (to trigger useEffects) instead of calling all the things I wanted to refresh manually as this function resets everything and it would be easier to just refresh the whole page. The problem I am running into is that in the firefox browser the following code just refreshes the page but the function never goes off:

  const resetPortfolioFunc = (e) => {
    dispatch(resetPortfolio());
    window.location.reload(false);
  };

I have also tried

  const resetPortfolioFunc = (e) => {
    dispatch(resetPortfolio());
    window.location = window.location;;
  };

And to clarify in brave, chrome, and microsoft edge the above code works perfectly as expected, it is merely Firefox that refreshes the page without dispatching the function and changing anything.

Just in case it is needed (which I do not think it is) here is the actual function resetPortfolio and the slice

export const resetPortfolio = createAsyncThunk(
  "/portfolio/resetPortfolio",
  async (value, thunkAPI) => {
    const token = thunkAPI.getState().auth.user.token;
    const userID = thunkAPI.getState().auth.user._id;
    const newObj = {
      token: token,
      userID: userID,
    };
    let url = `http://localhost:3001/api/portfolio/resetPortfolio`;
    const response = await axios.post(url, newObj);
    return response.data;
  }
);



export const portfolioSlice = createSlice({
  name: "portfolio",
  initialState,
  reducers: {
    reset: (state) => initialState,
  },
  extraReducers(builder) {
    builder
      .addCase(resetPortfolio.pending, (state, action) => {
        state.resetStatus = "loading";
      })
      .addCase(resetPortfolio.fulfilled, (state, action) => {
        state.resetStatus = "success";
      })
      .addCase(resetPortfolio.rejected, (state, action) => {
        state.resetStatus = "failed";
      });
  },
});

Now since I am using redux I do have a work around which is just to call window.location.reload(false) under a useEffect is the status is successful for the dispatch like:

 const resetPortfolioFunc = (e) => {
    dispatch(resetPortfolio());
  };

useEffect(() => {
 if (status == 'success') {
    window.location.reload
}
}, [status])

Now this solution is actually a bit slower than the original, which feels instant in all the browsers it works in for one, so if there is a way to get the original to work in firefox I would like to know if not I would at least like to know why firefox behaves this way when other browsers do not.

Answer 1

This is not so much about Redux - this is about you starting a network request and not waiting for it to actually happen.

Await the dispatch of the thunk (and such, the network request) before doing anything else.

  const resetPortfolioFunc = async (e) => {
    await dispatch(resetPortfolio());
    window.location.reload(false);
  };