Redux теряет состояние при переходе на другую страницу в Next. js - PullRequest
Новая
       132

Redux теряет состояние при переходе на другую страницу в Next. js

0 голосов
/ 14 июля 2020

Я создаю состояние redux на этой странице: 

import React from 'react';
import { connect } from 'react-redux';
import styled from 'styled-components';

import wrapper from '../redux/store';

import Container from '../components/Container/Container';

import Card from '../components/Card/Card';
import Circle from '../components/Circle/Circle';
import PieChart from '../components/PieChart/PieChart';
import Accordion from '../components/Accordion/Accordion';
import RadioButton from '../components/Ui/RadioButton/RadioButton';

import { manageList, reportList } from '../components/helper';

import { getManageListAndCategoryId } from '../redux/actions/actions';

const Panel = ({ manageProductsList }) => (
  <>
    {console.log(manageProductsList)}
    <MainContainer>
      <Title>Управление</Title>
      <ContainersWrapper>
        {manageProductsList.map((item, index) => <Card key={index} title={item.title} type="service" serviceName={item.value} />)}
      </ContainersWrapper>
      <SecondSection>
        <CustomContainer>
          <Title>Отчетность</Title>
          <p>Показатели за:</p>
          Здесь будут ТАБЫ
          <ContainersWrapper>
            {reportList.map((item, index) => <Card key={index} item={item} type="report" />)}
          </ContainersWrapper>
          <DiagreammWrapper>
            <PieChart />
            <Circle percent={20} />
            <Circle percent={87} />
            <Circle percent={30} />
            <Circle percent={47} />
          </DiagreammWrapper>
        </CustomContainer>
      </SecondSection>
      <CustomContainer>
        <TitleTwo>Доступные отчеты</TitleTwo>
        <Accordion />
        <RadioButton />
      </CustomContainer>
    </MainContainer>

  </>
);

export const getStaticProps = wrapper.getStaticProps(async ({ store }) => {
  store.dispatch(getManageListAndCategoryId(manageList));
});

const mapStateToProps = (state) => ({
  manageProductsList: state.mainReducer.manageProductsList,
});

export default connect(mapStateToProps, null)(Panel);

И я все еще могу видеть данные manageProductsList ( скриншот ) в Redux на этой странице. Но когда я перехожу на другую страницу динамического c маршрута forms/[id.tsx]

import React from 'react';
import { connect } from 'react-redux';

import wrapper from '../redux/store';

import { util, manageList, reportList } from '../../components/helper';
import { getManageListAndCategoryId } from '../../redux/actions/actions';

export async function getStaticPaths(categoryIds) {
  console.log('categoryIds', categoryIds);
  //temporarely make static path data while categoryIds is undefined
  const paths = [
    { params: { id: 'object' } },
    { params: { id: 'service' } },
    { params: { id: 'club_cards' } },
    { params: { id: 'schedule' } },
    { params: { id: 'agents' } },
    { params: { id: 'abonements' } },
    { params: { id: 'price_category' } },
    { params: { id: 'person_data' } },
    { params: { id: 'roles' } },
  ];
  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params, manageProductsList }) {
  // const postData = util.findFormData(params.id, manageProductsList);
  const postData = { title: 'asdsadasdsad' };
  return {
    props: {
      postData,
    },
  };
}

const Form = ({ manageProductsList }) => (
  <div>
    {console.log(manageProductsList)}
    {/* {postData.title} */}
    dasdsadsad
  </div>
);

const mapStateToProps = (state) => ({
  categoryIds: state.mainReducer.categoryIds,
  manageProductsList: state.mainReducer.manageProductsList,
});

export default connect(mapStateToProps, null)(Form);

, manageProductsList и categoryIds являются пустыми массивами ( скриншот 2 ), я использую собственный Link from next/link компонент для навигации по странице

Вот Card компонент для перехода на динамическую c страницу: 

import React, { FunctionComponent, HTMLAttributes } from 'react';
import styled from 'styled-components';

import Link from 'next/link';

import EditIcon from '@material-ui/icons/Edit';
import AddIcon from '@material-ui/icons/Add';

interface CardProps extends HTMLAttributes<HTMLOrSVGElement>{
    title: string
    type: string
    item?: {
      title: string
      amount: number
    }
    serviceName: string
}

const Card: FunctionComponent<CardProps> = ({
  type, title, serviceName, item,
}) => (
  <>
    {
              type === 'service'
              && (
              <FirstSection>
                <h1>{title}</h1>
                <ImageWrapper>
                  <Link href={`/forms/${serviceName}`}>
                    <a><AddIcon fontSize="large" onClick={(e) => { console.log(serviceName); }} /></a>
                  </Link>
                  <EditIcon />
                </ImageWrapper>
              </FirstSection>
              )
          }
    {
              type === 'report'
              && (
              <SecondSection>
                <h1>{item.title}</h1>
                <p>{item.amount}</p>
              </SecondSection>
              )

          }
  </>
);

export default Card;

Буду очень благодарен, если кто-нибудь может помочь

1 Ответ

0 голосов
/ 14 июля 2020

Ваш <Link> вызовет рендеринг на стороне сервера, вы можете наблюдать, загружается ли вкладка браузера или нет, когда переходите на другую страницу. Если это так, страница перезагрузится, и redux state будет refre sh.

Официальные документы показывают правильный способ использования маршрута Dynami c. 

<Link href="/forms/[id]" as={`/forms/${serviceName}`}>
...