Я следовал инструкциям для next-redux-wrapper
и настройки _app.ts
.
import { NextComponentType } from 'next';
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import { initializeStore, AppStore, globalReducer } from '../lib/store';
import { getCookie } from '../utils/cookie';
import { load } from '../lib/actions';
import { composeWithDevTools } from 'redux-devtools-extension';
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const makeStore = (initialState, options) => {
return createStore(
globalReducer,
initialState,
composeWithDevTools(applyMiddleware(thunk))
);
};
function MyApp({
Component,
pageProps,
store,
}: {
Component: NextComponentType;
pageProps: any;
store: AppStore;
}) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
MyApp.getInitialProps = async ({ Component, ctx }) => {
// we can dispatch from here too
const auth = getCookie('auth', ctx.req);
if (auth && !ctx.store.getState().user) {
await ctx.store.dispatch(load(auth)); //loads the user, etc
}
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {};
return { pageProps };
};
export default withRedux(makeStore)(MyApp);
Кажется, все более или менее работает и подключено, но я заметил, что когда я получаю доступ к ctx .store.getState()
из getInitialProps
, кажется, что всегда сохраняется начальное состояние.
Что еще хуже, что-то кажется непрерывным, вызывая getInitialProps
, пока страница просто бездействует.
У любого есть идея, что происходит?
Я действительно начинаю чувствовать себя следующим js & ssr - больше проблем, чем стоит.