[英]Next.js: getServerSideProps not working using Next.js with Next-redux-wrapper with TypeScript
[英]storage is not being update using redux-persist with next-redux-wrapper (Typescript)
我正在尝试使用 next-redux-wrapper 添加 redux-persist 和 next.js,但存储没有更新,state 在页面刷新期间丢失,
这是我的store.ts文件:-
import { createStore, applyMiddleware } from 'redux';
import { createWrapper } from 'next-redux-wrapper';
import storage from 'redux-persist/lib/storage';
import rootReducer from './rootReducer';
import { createLogger } from 'redux-logger'
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
const logger = createLogger();
// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== 'production') {
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const makeStore: any = ({ isServer }) => {
if (isServer) {
//If it's on server side, create a store
return createStore(rootReducer, bindMiddleware([logger]));
} else {
//If it's on client side, create a store which will persist
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store: any = createStore(
persistedReducer,
bindMiddleware([logger])
);
store.__persistor = persistStore(store);
return store;
}
};
export const wrapper = createWrapper(makeStore);
这是我的reducer.ts文件:-
import {
LOGOUT,
LOGIN_ERROR,
LOGIN_SUCCESS,
} from "./actionTypes";
const initialState = {
userInfo: null,
accessToken: null,
loginError: false,
loading: true,
isLoggedIn: false
};
const authReducer = (state: any = initialState, action: any) => {
switch (action.type) {
case LOGIN_SUCCESS:
state = {
...state,
userInfo: action.payload.userInfo,
accessToken: action.payload.accessToken,
loading: false,
isLoggedIn: true
}
break;
case LOGIN_ERROR:
state = {
...state
}
break;
case LOGOUT:
state = {
...state,
userInfo: null,
accessToken: null,
loginError: false,
loading: false,
isLoggedIn: false
}
console.log(state);
break;
default:
state = {
...state,
};
break;
}
return state;
};
export default authReducer;
还有我的_app.tsx文件:-
import type { AppProps } from "next/app";
import "../styles/reset.scss";
import Layout from "@/components/layout";
import { wrapper } from "../src/redux/store"
import { useStore } from "react-redux"
import { PersistGate } from "redux-persist/integration/react";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../src/graphql/apollo/apollo";
import Loader from '@/components/Loader'
function MyApp({ Component, pageProps }: AppProps) {
const apolloClient = useApollo(pageProps.initialApolloState);
const store: any = useStore();
return (
<ApolloProvider client={apolloClient}>
<PersistGate persistor={store.__persistor} loading={<div>Loading</div>}>
<Layout>
<Loader />
<Component {...pageProps} />
</Layout>
</PersistGate>
</ApolloProvider>
);
}
export default wrapper.withRedux(MyApp);
是否需要在 reducer 文件中提交persist/REHYDRATE操作?我正在检查persist/REHYDRATE操作,但该操作的负载未定义。
我找到了解决方案,这是我的 store.ts 文件
import { createStore, applyMiddleware } from 'redux';
import { createWrapper } from 'next-redux-wrapper';
import storage from 'redux-persist/lib/storage';
import rootReducer from './rootReducer';
import rootSaga from './rootSaga'
import { createLogger } from 'redux-logger'
import { persistStore, persistReducer } from 'redux-persist';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from "redux-saga";
const logger = createLogger();
const sagaMiddleware = createSagaMiddleware();
// BINDING MIDDLEWARE
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== 'production') {
return composeWithDevTools(applyMiddleware(...middleware));
}
return applyMiddleware(...middleware);
};
const makeStore: any = ({ isServer }) => {
if (isServer) {
//If it's on server side, create a store
return createStore(rootReducer, bindMiddleware([logger]));
// return createStore(rootReducer, bindMiddleware([]));
} else {
//If it's on client side, create a store which will persist
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store: any = createStore(
persistedReducer,
bindMiddleware([logger, sagaMiddleware])
// bindMiddleware([sagaMiddleware])
);
store.__persistor = persistStore(store);
sagaMiddleware.run(rootSaga);
return store;
}
};
export const wrapper = createWrapper(makeStore);
这是我的 _app.tsx 文件:-
import type { AppProps } from "next/app";
import "../styles/reset.scss";
import Layout from "@/components/layout";
import { wrapper } from "@/redux/store";
import { useStore } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { ApolloProvider } from "@apollo/client";
import { useApollo } from "@/graphql/apollo/apollo";
import Head from "next/head";
import SimpleReactLightbox from "simple-react-lightbox";
function MyApp({ Component, pageProps }: AppProps) {
const apolloClient = useApollo(pageProps.initialApolloState);
const store: any = useStore();
return (
<ApolloProvider client={apolloClient}>
<PersistGate persistor={store.__persistor} loading={null}>
<SimpleReactLightbox>
<Layout>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
</Head>
<Component {...pageProps} />
</Layout>
</SimpleReactLightbox>
</PersistGate>
</ApolloProvider>
);
}
export default wrapper.withRedux(MyApp);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.