When I logout in the popup appears for confirmation when I click on it and out of the session it is fine the problem is when I register or sign in again the (isLogouting and isOpeLogoutDialogue) do not change to false. i provide all of the configure code about redux toolkit
import { createSlice } from "@reduxjs/toolkit";
import GlobalReducer from "./GlobalReducer";
import GlobalStates from "./GlobalStates";
const GlobalSlice = createSlice({
name: "global",
initialState: GlobalStates,
reducers: GlobalReducer,
});
export default GlobalSlice.reducer;
export const {
handleOpenLogoutDialogue,
handleCloseLogoutDialogue,
handleLoggedOut,
} = GlobalSlice.actions;
const GlobalStates = {
isOpeLogoutDialogue: false,
isLogOuting: false,
};
export default GlobalStates;
import { router } from "@inertiajs/react";
const GlobalReducer = {
handleLoggedOut(state, action, dispatch) {
state.isLogOuting = true;
router.post(route("logout"), {
onFinish: () => {
state.isLogOuting = false;
state.isOpeLogoutDialogue = false;
},
});
},
handleOpenLogoutDialogue(state, action) {
state.isOpeLogoutDialogue = true;
},
handleCloseLogoutDialogue(state, action) {
state.isOpeLogoutDialogue = false;
},
};
export default GlobalReducer;
import { configureStore } from "@reduxjs/toolkit";
import AuthReducer from "./Slices/Auth/AuthSlice";
import GlobalReducer from "./Slices/Global/GlobalSlice";
const store = configureStore({
reducer: {
auth: AuthReducer,
global: GlobalReducer,
}
});
export default store;
Reducers are pure functions, they can't call router.post
and try to apply any asynchronous logic. The onFinish
should dispatch actions to the store to effect any state changes.
I suggest refactoring this logic into an asynchronous action that can (a) apply asynchronous logic and (b) dispatch actions back to the store via the generated pending/fulfilled/rejected actions for you to handle in extra reducers.
Basic Example:
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { router } from "@inertiajs/react";
import GlobalStates from "./GlobalStates";
export const handleLoggedOut = createAsyncThunk(
"global/handleLoggedOut",
() => {
return new Promise((resolve => {
router.post(route("logout"), {
onFinish: resolve,
});
}))
}
);
const GlobalSlice = createSlice({
name: "global",
initialState: GlobalStates,
reducers: {
handleOpenLogoutDialogue(state) {
state.isOpeLogoutDialogue = true;
},
handleCloseLogoutDialogue(state) {
state.isOpeLogoutDialogue = false;
},
},
extraReducers: builder => {
builder
.addCase(handleLoggedOut.pending, () => {
state.isLogOuting = true;
})
.addCase(handleLoggedOut.fulfilled, () => {
state.isLogOuting = false;
state.isOpeLogoutDialogue = false;
})
.addCase(handleLoggedOut.rejected, () => {
state.isLogOuting = false;
state.isOpeLogoutDialogue = false;
});
},
});
export const {
handleOpenLogoutDialogue,
handleCloseLogoutDialogue,
} = GlobalSlice.actions;
export default GlobalSlice.reducer;