NextJs 中间件和 redux 存储

Question

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?

Answer 1

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.