如何在 Next.js 环境中访问 redux-toolkit 状态（不是初始状态）

Question

i want to acccess to redux-toolkit's state at Next.js's getStaticProps

(After saving the accessToken in the store I want to access the store from getstaticprops for the api it needs)

so i tried like this

export default function Page({ state }) {
  console.log(state)
  return <>...</>
}
export const getStaticProps = wrapper.getStaticProps((store) => {
  return async () => {
    const state = store.getState()
    return {
      props: {
        state
      }
    }
  }
})

finally access was successful so i check state on redux devtools and it is there

but state is realistically initial state (empty)

redux devtools.img

console.log.img

this is my redux toolkit setup on Next.js

//_app.js

import { wrapper } from '../store'

function MyApp({ Component, pageProps }) {
  axios.defaults.withCredentials = true
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default wrapper.withRedux(MyApp)

/store/index.js

import { configureStore } from '@reduxjs/toolkit'
import { createWrapper } from 'next-redux-wrapper'
import logger from 'redux-logger'
import reducer from './modules'

const makeStore = (context) =>
  configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(/*logger*/),
    devTools: process.env.NODE_ENV !== 'production'
  })

export const wrapper = createWrapper(makeStore, {
  debug: process.env.NODE_ENV !== 'production'
})

/store/modules/index.js

import { combineReducers } from '@reduxjs/toolkit'
import { HYDRATE } from 'next-redux-wrapper'

import timer from './timer'
import user from './user'
import cart from './cart'

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    return {
      ...state,
      ...action.payload
    }
  }
  return combineReducers({
    user,
    timer,
    cart
  })(state, action)
}
export default reducer

/store/modules/user.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = { userInfo: null, token: null, address: null }

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    getNewToken: (state, action) => {
      state.token = action.payload
    },
    getUserInfo: (state, action) => {
      state.userInfo = action.payload
    },
    getAddress: (state, action) => {
      state.address = action.payload
    }
  }
})

export const { getUserInfo, getNewToken, getAddress } = userSlice.actions
export default userSlice.reducer

Answer 1

getStaticProps run on the server, without any knowledge of what is going on on your client. This even happens on site generation, which could be anywhere between seconds or years before the user actually uses the page. You will never have access to the client-side Redux store there - and as you do not know how the client navigated to that page, it will always be a "new" Redux state.

You can dispatch some actions within getStaticProps and then get the resulting state via getState , but it will always be isolated per getStaticProps call.