Estoy comenzando un nuevo proyecto next js, estamos migrando de una aplicación de reacción normal a una próxima aplicación. tenemos la intención de usar el kit de herramientas redux para nuestra gestión de estado global y estamos usando la representación del lado del servidor. Así que nos encontramos con el paquete npm next-redux-wrapper que parecía resolver la mayoría de nuestros problemas con redux y ssr use la representación del lado del servidor en una de las páginas, la acción HYDRATE de next-redux-wrapper está siendo llamada al menos dos veces, a veces incluso 4 veces. ¿Qué es exactamente lo que está saliendo mal porque el artículo al que me referí parece funcionar bien? detalles y los detalles del segmento Redux, y los detalles de mi función getServerSideProps.
import { createStore, applyMiddleware, combineReducers } from "redux"; import count from "../ReduxSlices/CounterSlice"; import { createWrapper, HYDRATE } from "next-redux-wrapper"; import { configureStore } from "@reduxjs/toolkit"; const combinedReducer = combineReducers({ count, }); const reducer = (state, action) => { if (action.type === HYDRATE) { const nextState = { ...state, // use previous state ...action.payload, // apply delta from hydration count: { count: state.count.count + action.payload.count.count, }, }; return nextState; } else { return combinedReducer(state, action); } }; export const makeStore = () => configureStore({ reducer: reducer, }); export const wrapper = createWrapper(makeStore, { debug: true });y mi porción Redux es
import { createSlice } from "@reduxjs/toolkit"; import { HYDRATE } from "next-redux-wrapper"; const initialState = { count: 0, }; const counterSlice = createSlice({ name: "counter", initialState: initialState, reducers: { increment: (state) => { state.count = state.count + 1; }, }, }); export const { increment } = counterSlice.actions; export default counterSlice.reducer;y finalmente así es como envío una acción dentro de getServerSideProps
export const getServerSideProps = wrapper.getServerSideProps( (store) => async () => { store.dispatch(increment()); console.log("server", new Date()); } );El registro de la consola se registra solo una vez, pero la acción HIDRATAR se envía al menos dos veces... cualquier información será útil, gracias.