I would like to check what's inside my redux store from NextJs middleware.
I couldn't find a solution, and the better i achieved is the following:
I've started with the [NextJs-with-redux-saga]example( https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga )
and to access the store SSR I had to use a library . Current store.js content is like this
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { HYDRATE, createWrapper } from 'next-redux-wrapper';
import rootReducer from './reducers/rootReducer';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas/rootSaga';
const sagaMiddleware = createSagaMiddleware();
const reducer = (state, action) => {
if (action.type === HYDRATE) {
// Merge any state which can be set in SSR here
const nextState = {
...state,
tick: {
...action.payload.tick,
},
};
return nextState;
} else {
return rootReducer(state, action);
}
};
const initStore = () => {
console.log('here');
const store = createStore(reducer, composeWithDevTools(applyMiddleware(sagaMiddleware)));
sagaMiddleware.run(rootSaga);
return store;
};
export const nextStore = createWrapper(initStore);
I've then created a middleware under the pages directory as per doc
import { NextResponse } from 'next/server';
const middleware = (req, ev) => {
return NextResponse.next();
};
export default middleware;
This clearly wasn't enough since i need access to the store. The library I picked has no solution for accessing the store on the middleware, so i tried to hack around by using the getServerSideProps
one.
import { NextResponse } from 'next/server';
import { nextStore } from '@store/store';
export const middleware = nextStore.getServerSideProps((store) => async ({ req, query, res }) => {
const { tick } = store.getState();
console.log(tick;
return NextResponse.next();
});
somehow it does work and i can see the store, but some errors is prompted
error - TypeError: result.response.headers is not iterable
./node_modules/react/cjs/react.development.js
eval
not allowed in Middleware pages/_middleware
Was anyone able to achieve this?
As far I know NextJS middleware new feature works on server side. While Redux Front-end library. may It works on some cases but it will show error where redux needs some browsers actions related.
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.