LoginModal.jsx
import ...
const [burgerAnimation, setBurgerAnimation] = useState(false);
const handleBurgerAnimation = () => {
setBurgerAnimation(!burgerAnimation);
};
userSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import LoginService from "../../Services/Login.service";
export const userSubmit = createAsyncThunk("user/submit", async (params) => {
try {
const { submitFunc, submitForm, dispatch, closeModal, navigate, handleBurgerAnimation } = params;
const { data } = await submitFunc(submitForm);
dispatch(handleError(null)); // clear error message after
closeModal();
navigate("/");
return {data, handleBurgerAnimation};
} catch (error) {
const { dispatch } = params;
const errorMessage = error.response.data.message;
dispatch(handleError(errorMessage));
dispatch(handleStatus("idle"))
}
});
export const userLogout = createAsyncThunk(...);
export const userRefreshAccessToken = createAsyncThunk(...);
const initialState = {
userData: {},
errorResponse: null,
status: "idle",
};
export const userSlice = createSlice({
name: "user",
initialState,
reducers: {...},
extraReducers: {
[userSubmit.pending]: (state, action) => {...},
[userSubmit.fulfilled]: (state, action) => {
const {data, handleBurgerAnimation} = action.payload;
if (data) {
state.status = "succeeded";
state.userData = data;
localStorage.setItem("user", JSON.stringify(action.payload));
handleBurgerAnimation();
}
},
[userSubmit.error]: (state, action) => {...},
[userRefreshAccessToken.fulfilled]: (state, action) => {...}
},
});
export ...
Hi all.I try to close navbar menu in mobile web when user login but when i try to do that i get this error.If i dont use handleBurgerAnimation function in [userSubmit.fulfilled] i dont get this error.What is the reason i cant use handleBurgerAnimation function in extrareducer ? Finally i would appreciate if you could give feedback about my project.
Repo : https://github.com/UmutPalabiyik/mook