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)
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.