Redux 在 Next.js 中导航到另一个页面时丢失状态

Question

我正在这个页面中创建 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);

而且我仍然可以在这个页面中看到 Redux 中的数据 manageProductsList (screenshot)。但是当我导航到另一个动态路由页面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 是空数组 (screenshot 2) 我正在使用原生 Link from next/link 组件来导航页面

这是导航到动态页面的Card组件：

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;

如果有人能提供帮助，我将不胜感激

Answer 1

你的<Link>会引起服务端渲染，你可以在导航到另一个页面时观察浏览器标签是否正在加载。如果是，页面将重新加载，redux state 将被刷新。

official docs 显示了使用动态路由的正确方法。

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