NextJs 中间件和 redux 存储

Question

我想从 NextJs 中间件检查我的 redux 商店里面有什么。

我找不到解决方案，我取得的更好的是以下内容：

我已经开始使用 [NextJs-with-redux-saga] 示例（ https://github.com/vercel/next.js/tree/canary/examples/with-redux-saga ）

要访问商店 SSR，我必须使用库。 当前 store.js 内容是这样的

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);

然后我根据文档在 pages 目录下创建了一个中间件

import { NextResponse } from 'next/server';

const middleware = (req, ev) => {
  return NextResponse.next();
};

export default middleware;

这显然还不够，因为我需要访问商店。 我选择的库没有访问中间件上的存储的解决方案，所以我尝试使用getServerSideProps来破解。

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();
});

不知何故它确实有效，我可以看到商店，但提示了一些错误

错误 - TypeError：result.response.headers 不可迭代

./node_modules/react/cjs/react.development.js
中间件页面/_middleware 中不允许使用eval

有没有人能够做到这一点？

Answer 1

据我所知，NextJS 中间件的新功能适用于服务器端。 而 Redux 前端库。 可能它适用于某些情况，但它会显示错误，其中 redux 需要一些与浏览器相关的操作。