#redux #next.js
Вопрос:
Я хотел бы проверить, что находится внутри моего магазина redux из промежуточного программного обеспечения NextJS.
Я не смог найти решение, и чем лучше я достиг, тем ниже:
Я начал с того, что [NextJs-with-redux-saga]example(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);
Затем я создал промежуточное программное обеспечение в каталоге страниц в соответствии с документом
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();
});
каким-то образом это работает, и я вижу магазин, но появляется запрос на некоторые ошибки
ошибка — ошибка типа: результат.ответ.заголовки не могут быть повторены
./node_modules/react/cjs/react.development.js
eval
не допускается на страницах промежуточного программного обеспечения/_middleware
Смог ли кто-нибудь добиться этого?
Ответ №1:
Насколько я знаю, новая функция промежуточного программного обеспечения NextJS работает на стороне сервера. В то время как интерфейсная библиотека Redux. может быть, это работает в некоторых случаях, но это покажет ошибку, когда redux нуждается в некоторых действиях, связанных с браузерами.
Комментарии:
1. Да, сам redux этого не допускает. Библиотека, используемая в этом примере, имеет цель разрешить использование состояния redux на сервере, и она работает для разных функций сервера (например, getServerSideProp), но для промежуточного программного обеспечения нет реализации