使用 Redux、React、NextAuth 在登录时调度操作客户端的最佳方式

Question

. Answers to this question are eligible for a +50 reputation bounty. Jordan Epstein wants to to this question.

I am writing a web app based on the Spotify API. Once the user logs in using NextAuth, I want the app to automatically load the user's playlists.

I currently have it set up so that there is a button to load playlists and the button does not appear unless the user is logged in - this works and is simple. However, the button is unnecessary. There is no use-case for the app that doesn't begin with loading the user's playlists.

I currently have a thunk action written which was dispatched by the "Load Playlists" button to fetch the playlists asynchronously and add the playlists to the redux state.

I can think of multiple possible options to get the automatic loading to work well, but I imagine there has to be a clean way. NextAuth has the [signIn event callback] https://next-auth.js.org/configuration/events#signin which seems like the right place to start. But since this would be run server-side, it would need some way to contact the client.

Answer 1

what I usually do is save the Jwt on local storage then use a use effect to get it if not existing then get it from the server using the thunk action. also, see How to wait for action to complete before redirecting in react redux? how to define the thunk

Answer 2

Just observe the status in. a useEffect and once the status is authenticated call the load playlist action.

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()
  
  useEffect(() => {
      if (status === "authenticated") {
           Load_Playlists()
      }
  }, [status])


  return <Main>
}