我正在使用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会这样做,而其他浏览器没有。
1条答案
按热度按时间omhiaaxx1#
这与Redux没有太多关系--这是关于您启动网络请求,而不是等待它实际发生。
在执行其他操作之前,等待thunk(以及网络请求)的分派。