Nextjs - getInitialProps сделать перезагрузку и удалить хранилище - PullRequest
Новая
       59

Nextjs - getInitialProps сделать перезагрузку и удалить хранилище

1 голос
/ 27 сентября 2019

Я создал сайт с nextjs (с сервером express & API) и Reactjs.

Я хотел бы создать динамические нумерации страниц, потому что для статически генерируемых результатов слишком много, поэтому я добавил конечную точку сервера / publiations / page /: id , я поставил getInitialsProps длясохранить идентификатор в запросе

Но на самом деле, когда я нажимаю на мою главную страницу / публикации, где мой магазин не пуст, чтобы перейти на следующую страницу ( публикаций / страница / 1 ),страница перезагружается и магазин пуст.Как я могу сохранить свой магазин при смене маршрута?

А вот мои публикации / страницы / [id] .js 


const PublicationsPage = ({id}) => {
  return (
      <>
        <MainMenu/>
        <Search/>
        <div className="flex">
          <Sidebar fallback={<Loader/>}/>
          <Cards type={'publications'} idPage={id} />
        </div>
      </>
  )
}


PublicationsPage.getInitialProps = async function({ query: { id } }) {
  return {
    id: id
  };
};

export default withAuthSync(PublicationsPage);

Компоненты карт, где я использую данные магазина: components / Cards.js 

const Cards = ({ idPage, cards, type }) => {

  console.log(cards)

    return (
        <div className="cards">
            <div className="content-filter-search">
                <div className="content-newsearchresult">
                    <div className="global-name">Result: {cards.cards.length} articles found</div>
                    <div className="content-button-blue">
                        <Link href="/explorer">
                            <a>
                                <div className="button-blue">New search</div>
                            </a>
                        </Link>
                    </div>
                </div>
                <div className="content-filter">
                    {filters[idPage].map((item) => {
                        return <InputFilter key={item.id} data={item} callback={keepItems} />;
                    })}
                </div>
            </div>
            <div className="wrapper-card">
                <div className="cards-container">
        {
          !cards.loading ? cards.cards.slice(idPage * 9, idPage * 9 + 9).map((card) => (
            <Card key={card.PMCID}  data={card} />
          )) : <Spinner color="black" size="100px" thickness={3} gap={5} speed="fast" />
        }
                </div>
            </div>
      <div className="text">
        <Link href={'/publications/page/1'}><a>Next page</a></Link>
      </div>
      {
        !cards.loading ? (
          <div className="center">
                    <Pagination type={type} page={parseInt(idPage)} totalElement={cards.cards.length} numberPerPage={9} />
                </div>
        ) : null
      }
        </div>
    );
};

const mapStateToProps = state => ({
  cards: state.cards,
})

export default connect(mapStateToProps)(Cards);

Я использую тот же код для маршрута / публикаций и / публикаций / страницы /: id , просто я добавляю getInitialProps, чтобы сохранить идентификатор страницы.И я использую connect redux в моем компоненте Cards

У меня нет ошибки в консоли, просто мое хранилище сбрасывается, потому что страница перезагружается.Я не понимаю, как я могу сделать нумерацию страниц с моим магазином, где мои данные, если при смене страницы магазин пуст

Спасибо

...