Как слушать back button браузера и триггерить экшены?

Question

[DanceMonkeyTime]

Использую React в связке с Next.js. Есть степпер, он независим от url, а зависит от стора в редаксе.
Сейчас делаю функционал на back button и клиент хочет что-бы он был одинаковый и на кнопке кастомной и на кнопку браузерной.

Степпер находится постоянно на /new урле.

Пробую отловить нужный экшен с помощью history пакета:

import Router from 'next/router';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

history.listen((location) => {
    if (location.action === 'POP') {
        dispatch(updateScreenStep('back'));
        Router.push('/new'); // всегда обновляю урлу, что-бы не пошло дальше неё 
    }
  });

Оно работает, но с ошибками, если большая вложенность степов.
Как такое можно реализовать?

Answer 1

[hzzzzl]

возможно выйдет тупо в _app.js или в какой-нибудь основной враппер Layout.js положить обработчик события popstate?

React.useEffect(() => {
  window.addEventListener('popstate', doStuff)
  return () => {
    window.removeEventListener('popstate', doStuff)
  }
}, [doStuff])   // function doStuff() {}

а можно вопрос, как вообще redux подцепил к нексту?
я сколько не пробовал, но не вышло сделать так, чтобы стор не очищался после навигации между страницами.. но мне надо чтобы он каждый раз заполнялся при загрузке страницы через getInitialProps, и поэтому каждый раз страница заново рендерится на сервере

Comments

[DanceMonkeyTime]

https://github.com/kirill-konshin/next-redux-wrapper

[Сергей Сунцев]

Можете сохранять его в persist

[Nikita]

По официальной документации, можно даже без враппера. Все отлично работает https://github.com/vercel/next.js/tree/canary/exam...

[hzzzzl]

Nikita, ну оно-то работает да, но у меня в редакс подгружается из БД динамичный лейаут и контент всего аппа (пункты меню, условные "карточки товаров" итп), то есть это должно быть server-rendered с заполненным редаксом на каждой странице, то есть на каждой странице надо дергать getInitialProps, и там всегда стор будет обнуляться и заново перезагружаться.. подозреваю что надо тупо архитектурно это поменять, но еще не придумал как

а хотелось бы "как в реакте" единожды при загрузке аппа отрендерить например Header, и менять при навигации только главный контент

Сергей Сунцев, кстати да, видел про persist, но не добрался попробовать

[Nikita]

hzzzzl, А разве если грузить в _app.js, он не будет применяться ко всем страницам и не будет сбрасываться ? Я просто не проверял это, только на страницах получал параметры и пихал их в Редакс, и они при этом не сбрасывались. Но мне бы хотелось, чтобы как-то при инициализации самого редакса заполнялось, но я так и не понял как это реализовать.

Но да, единственный минус подгрузки в app.js это то что после этого все страницы автоматом становятся SSR