javascript - next-router 和 redux 没有获取之前的状态

Question

我有这个组件叫做宣布：

import React, { useEffect } from "react";
import Layout from "../components/layout";
import { GetCategories } from "../redux/actions/category.action";
import { GetBrands } from "../redux/actions/brand.action";
import { GetEquipments } from "../redux/actions/equipment.action";
import { AddProduct } from "../redux/actions/product.action";
import PropTypes from "prop-types";
import AutoFormStepper from "../components/AutoFormStepper";
import { connect } from "react-redux";

const Announce = ({
  categories,
  brands,
  equipments,
  GetBrands,
  GetCategories,
  GetEquipments,
  AddProduct
}) => {
  // Render data...

  useEffect(() => {
    GetCategories();
    GetBrands();
    GetEquipments();
  }, []);
  return (
    <Layout>
      <AutoFormStepper
        categories={categories}
        brands={brands}
        equipments={equipments}
        AddProduct={AddProduct}
      />
    </Layout>
  );
};

Announce.propTypes = {
  categories: PropTypes.array.isRequired,
  brands: PropTypes.array.isRequired,
  equipments: PropTypes.array.isRequired,
  AddProduct: PropTypes.func.isRequired
};

const mapStateToProps = (state) => {
  return {
    categories: state.categories,
    brands: state.brands,
    equipments: state.equipments,
  };
};

const mapDispatchToProps = {
  GetCategories,
  GetBrands,
  GetEquipments,
  AddProduct
};

export default connect(mapStateToProps, mapDispatchToProps)(Announce);

这里的问题是当我位于这个页面组件中时，我已经获取了品牌、类别..等，但是如果创建一个 Route.push("/usedCar") 这是这个组件：

import React from "react";
import Typography from "@material-ui/core/Typography";
import Layout from "../components/layout";
import CardList from "../components/CardList";
import FilterDetail from "../components/FilterDetail";
import { GetProductsByFeatured } from "../redux/actions/product.action";
import { wrapper } from "../redux/store";

const UsedCar = ({ products }) => {
  return (
    <Layout>
      <Typography variant="h5" gutterBottom>
        Autos Destacados
      </Typography>
      <CardList products={products} />
      <FilterDetail />
    </Layout>
  );
};

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ store }) => {
    await store.dispatch(GetProductsByFeatured());
    const products = await store.getState().products.docs;
    return {
      props: {
        products,
      },
    };
  }
);

export default UsedCar;

因此，当 Route.push("/usedCar") 起作用时，我的类别、品牌 .. 等的上一个状态确实存在于我当前的状态中。我不知道如何解决这个问题。

另外我想提一下，如果使用客户端 useEffect 来获得它可以工作的产品。所以我认为这个问题与 getServerSideProps 有关

谢谢。

标签： javascriptreactjsreduxreact-reduxnext.js