Data in global storage appears only after the page is reloaded. Redux

22 Views Asked by At

I am implementing user authorization using Google using next auth.

The logic is as follows:

  1. The user clicks on the login button using Google, after which he is taken to a page with an account selection.

  2. After selecting an account, it is returned back to the page.

  3. When the page is rendered, the following useEffect is executed:

const { data: session } = useSession();
  const dispatch = useDispatch<any>();

  useEffect(() => {
    console.log(session);
    if (session) {
      dispatch(
        logInWithGoogle({
          type: "google",
          email: session?.user?.email,
          name: session?.user?.name,
          socialID: session?.user?.id,
        })
      );
      console.log("qwe");
    }
  }, [session]);
  1. loginWithGoogle sends a request to the server, and most importantly, RECEIVES a response.
export const logInWithGoogle = createAsyncThunk("user/logInWithGoogle", async (data: loginWithGoogleData) => {
  const formData = new FormData();
  formData.append("type", `${data.type}`);
  formData.append("email", `${data.email}`);
  formData.append("name", `${data.name}`);
  formData.append("socialID", `${data.socialID}`);
  const response = await serviceFetch.post("/auth/social-networks", undefined, formData);
  const res = await response.json();
  if (res.result && !Object.keys(res.errors).length) {
    updateTokenStorage(res.data.token);
    console.log(res);
    data.router.replace("/profile");
  }
  return res;
});

But the data in the storage itself appears only after the page is reloaded, why is that? The session is available immediately after authorization.

0

There are 0 best solutions below