Состояние на стороне клиента не гидратируется с сервера при перезагрузке страницы

Состояние на стороне клиента не гидратируется с сервера после создания нового магазина

Ссылка на CodeSandBox – https://codesandbox.io/s/vibrant-aryabhata-l29r2b

Шаги для воспроизведения поведения:

  1. Запустите приложение по ссылке выше.
  2. Войти под любым логином/паролем
  3. При входе в систему токен сохраняется в файле cookie, и страница перенаправляется на панель инструментов.
  4. В консоли на странице панели инструментов я печатаю текущее состояние, которое выглядит нормально, когда мы вошли в систему.
  5. Теперь обновите страницу панели инструментов.
  6. Сервер получает токен через cookie и аутентифицируется
  7. Но когда на клиенте создается новое хранилище, оно не получает состояние гидратации/обновления.
  8. То же самое можно подтвердить из состояния аутентификации, напечатанного в console.log на этой странице.

Ожидаемое поведение

При перезагрузке страницы после гидратации клиент также должен пройти аутентификацию, и, следовательно, консоль будет печатать вход в систему true.

Скриншоты

image

Вы можете ясно видеть на скриншоте выше, что в соответствии с гидратацией (__NEXT_REDUX_WRAPPER_HYDRATE__ ) состояние обновляется правильно, но в журнале консоли на стороне клиента я получаю loggedin как ложное.

  • Next.js: [12]
  • Next-reux-обертка [7]

Дополнительный контекст

Я застрял на этом некоторое время и действительно не знаю, что-то не так с моим кодом или это ошибка. Пожалуйста, изучите его и предложите соответственно.

Вы можете опубликовать свой код магазина и редуктора?

Yilmaz 23.04.2022 01:07

@Yilmaz Привет, я поделился всем кодом на codeandbox - codeandbox.io/s/яркий-aryabhata-l29r2b Перейдите в папку хранения, там есть все, что вам нужно

Gaurav 23.04.2022 01:11

Не знаю почему, но если в редюсер вернуть измененный параметр состояния вместо нового объекта, то он начинает работать. Похоже, есть какой-то код, который вызывает редьюсер, а затем проверяет, что возвращаемый объект будет иметь ту же ссылку, что и аргумент. магазин/index.js: const nextState = Object.assign(state, serverState);

Artem Fitiskin 27.04.2022 21:03
Напоминание В этом случае Object.assign(a, b) ведет себя иначе, чем { ...a, ...b }. Он не создает новый объект. Он изменяет state, а затем использует ту же ссылку на переменную nextState.
Artem Fitiskin 27.04.2022 21:09

@ArtemFitiskin, хотя ваше предложение работает, оно вызывает новую проблему неизменности. redux.js.org/style-guide/#do-not-mutate-state

Gaurav 28.04.2022 19:47

@Gaurav, да, тебе не нужно этого делать. Я просто говорил о своем наблюдении.

Artem Fitiskin 29.04.2022 15:27

@ArtemFitiskin, да, и это возвращает меня к нерешенной проблеме!!

Gaurav 30.04.2022 12:28
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
7
118
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас небольшая неправильная конфигурация. next-redux-wrapper уже добавляет Провайдер с правильным магазином. Вам нужно удалить дополнительного провайдера, который вы добавляете _app.js. Это было причиной того, что компонент не получал правильные данные.

  render() {
    const { Component, pageProps, router } = this.props;
    return <Component {...pageProps} router={router} />;
  }

Другие вопросы по теме