redux Firefox无法调度并刷新页面,但其他浏览器可以

wz1wpwve  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(151)

我正在使用redux工具包,并且正在使用redux thunk调度一个函数。在我调度这个特定函数之后,我只是强制页面刷新(触发useEffects)而不是调用所有我想手动刷新的东西,因为这个函数重置了一切,只刷新整个页面会更容易。我遇到的问题是,在Firefox浏览器中,下面的代码只是刷新页面,但该功能从未关闭:

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

我也试过

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

为了澄清brave、chrome和microsoft edge中上述代码的工作完全符合预期,只是Firefox刷新了页面,而没有调度函数和更改任何内容。
为了以防万一(我认为不需要),下面是实际的函数resetPortfolio和切片

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";
      });
  },
});

现在,由于我使用的是redux,我有一个解决办法,就是在useEffect下调用window.location.reload(false),状态为successful的分派如下:

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

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

现在这个解决方案实际上比原来的要慢一点,它在所有的浏览器中都是即时的,所以如果有一种方法可以让原来的在firefox中工作,我想知道如果没有的话,我至少想知道为什么firefox会这样做,而其他浏览器没有。

omhiaaxx

omhiaaxx1#

这与Redux没有太多关系--这是关于您启动网络请求,而不是等待它实际发生。
在执行其他操作之前,等待thunk(以及网络请求)的分派。

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

相关问题