gpt4 book ai didi

typescript - 如何在页面刷新时正确补充 NextJS 中的 Redux 状态?

转载 作者:行者123 更新时间:2023-12-03 16:58:33 27 4
gpt4 key购买 nike

我遇到的问题是在应用程序重新加载/页面刷新时从本地存储中获取用户数据。
在我的项目中,我使用 NextJS 作为前端,支持库使用 redux-toolkit用于跨应用程序和 next-redux-wrapper 的 redux 管理用于包装页面的状态水化。
用户可以登录,在这种情况下,我存储 isLoggedIn本地存储和 redux 状态中的 bool 值。取决于 isLoggedIn bool 值我更改了 Navbar组件样式( Navbar 直接包含在 _app.tsx 中)。
当用户刷新任何页面时 isLoggedIn bool 值未加载到状态中,但存在于本地存储中。
过去我一直在使用 redux-persist但我选择不使用它,因为 PersistGate阻止 UI 呈现,直到从存储中获取持久数据,这与 SSR 的想法相冲突。
目前我有 isLoggedIn使用 App.getInitialProps 修复了加载问题_app.ts 中的方法然后导致来自 next-redux-persist 的水合作用为每个加载的页面调用,但这引入了另一个问题:所有页面现在都在服务器端呈现,并且没有 NextJS 的静态页面优化。
有什么办法可以不丢失NextJS的静态页面优化,不使用redux-persist库,并且在刷新任何页面时仍然能够对客户端存储进行补充?
当前代码结构(为简单起见省略了一些代码):file: _app.tsx

import { wrapper } from 'store';

const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<>
<Navbar />
<Component {...pageProps} />
</>
);
};


MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);

return { ...appProps };
};

export default wrapper.withRedux(MyApp);
file: store.ts
import {
combineReducers,
configureStore,
EnhancedStore,
getDefaultMiddleware
} from '@reduxjs/toolkit';
import { createWrapper, MakeStore } from 'next-redux-wrapper';
import userReducer from 'lib/slices/userSlice';

const rootReducer = combineReducers({
user: userReducer
});

const setupStore = (context): EnhancedStore => {
const middleware = [...getDefaultMiddleware(), thunkMiddleware];

if (process.env.NODE_ENV === 'development') {
middleware.push(logger);
}

return configureStore({
reducer: rootReducer,
middleware,
// preloadedState,
devTools: process.env.NODE_ENV === 'development'
});
};

const makeStore: MakeStore = (context) => setupStore(context);
export const wrapper = createWrapper(makeStore, {
debug: process.env.NODE_ENV === 'development'
});
file: userSlice.ts
import { createSlice } from '@reduxjs/toolkit';
import { HYDRATE } from 'next-redux-wrapper';

const initialState = {
isLoggedIn: false
}

export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
login: (state) => {
state.isLoggedIn = true;
localStorage.setItem('loggedInData', { isLoggedIn: true });
}
},
extraReducers: (builder) => {
builder
.addCase(HYDRATE, (state, action: any) => {
if (typeof window !== 'undefined') {
const storedLoggedInData = localStorage.getItem('loggedInData');
if (storedLoggedInData != null && storedLoggedInData) {
const parsedJson = JSON.parse(storedLoggedInData);
state.isLoggedIn = parsedJson.isLoggedIn ?? false;
} else {
state.isLoggedIn = false
}
}
});
}
});

export const isLoggedInSelector = (state: RootState) => state.user.isLoggedIn;

export default userSlice.reducer;
file: Navbar.tsx
import { useSelector } from 'react-redux';
import { isLoggedInSelector } from 'lib/slices/userSlice';

export default function Navbar() {
const isLoggedIn = useSelector(isLoggedInSelector);
return (
<div className={`${ isLoggedIn ? 'logged-in-style' : 'logged-out-style'}`}>...</div>
)
}

最佳答案

今天有同样的问题。问题是我们需要将客户端存储与页面渲染解耦并将其移至 useEffect组件安装的位置。基本思想是,您首先完全呈现页面,然后使用客户端存储信息更新页面。
直接合并客户端本地存储可能/会干扰水合作用。
这是我使用的代码示例

export default const MenuBar = () => {
const isLoggedIn = useSelector((state) => state.isLoggedIn);
useEffect(() => {
// loads from clients local storage
const auth = loadAuthenticationToken();
if (auth !== null) {
// updates the store with local storage data
dispatch(actions.jwtTokenUpdate(auth));
}
}, [dispatch]);

if (isLoggedIn) {
return <p>you are logged in</p>;
} else {
return <p>please log in</p>;
}
}
作为引用,NextJS 上的一个 github 问题: https://github.com/vercel/next.js/discussions/17443
以及需要访问窗口进行渲染的博客文章: https://dev.to/adrien/creating-a-custom-react-hook-to-get-the-window-s-dimensions-in-next-js-135k

关于typescript - 如何在页面刷新时正确补充 NextJS 中的 Redux 状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64805494/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com