React Redux 不会在下一个 js 13 中更新 UI？

Question

我正在尝试制作一个购物车，我对 react redux 比较陌生，而且我正在将它与 NextJs 13 的应用程序目录一起使用。

首先，我在 app/provider.js 中创建了一个提供程序文件：

"use client";

import { Provider } from "react-redux";
import { store } from "../redux/store";

export function Providers({ children }) {
  return <Provider store={store}>{children}</Provider>;
}

然后在 app/layout.js 中：

import { Providers } from "./provider";

export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>
        <Providers>
          <Header />
          <div>{children}</div>
          <Footer />
        </Providers>
      </body>
    </html>
  );
}

然后我在 app 目录之外创建了一个 redux 文件夹：

src/redux/store.js

    import { configureStore } from "@reduxjs/toolkit";
    import cartReducer from "./cartReducer";
    
    export const store = configureStore({
      reducer: { cart: cartReducer },
    });

src/redux/cartReducer.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  products: [],
};

export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action) => {
      const item = state.products.find((item) => item.id === action.payload.id);
      if (item) {
        item.quantity += action.payload.quantity;
      } else {
        state.products.push(action.payload);
      }
    },
    removeItem: (state, action) => {
      state.products = state.products.filter(
        (item) => item.id !== action.payload
      );
    },
    resetCart: (state) => {
      state.products = [];
    },
  },
});

export const { addToCart, removeItem, resetCart } = cartSlice.actions;

export default cartSlice.reducer;

所以我有带有 page.js 的 [itemId] 文件夹，它显示带有“添加到购物车”按钮的单个产品：应用程序/查看所有/[itemId]/page.js

import CartButton from "../../../ui/CartButton";

const fetchItem = async (itemId) => {
  const res = await fetch(
    process.env.NEXT_PUBLIC_API + `${itemId}` + "?populate=*",
    {
      next: { revalidate: 60 },
    }
  );
  const item = await res.json();
  return item.data;
};

async function ItemPage({ params: { itemId } }) {
  const item = await fetchItem(itemId);

  return (
    <main>
      <section>
        <div>
          <Image
            src={item.attributes.img.data.attributes.url}
            width="1500"
            height="1000"
            alt={item.attributes.title}
          />
          <FavoriteButton />
        </div>
        <aside>
          <div>
            <h1>
              {item.attributes.title}
            </h1>
            <p>
              €{item.attributes.price}
            </p>
            <p>
              {item.attributes.desc}
            </p>
            <div>
              <CartButton item={item} /> // "ADD TO CART" BUTTON
            </div>
          </div>
        </aside>
      </section>
    </main>
  );
}

export default ItemPage;

src/ui/CartButton.js

"use client";

import React, { useState } from "react";
import { HiOutlineShoppingBag } from "react-icons/hi";
import { useDispatch } from "react-redux";
import { addToCart } from "../redux/cartReducer";

const CartButton = ({ item }) => {
  const dispatch = useDispatch();
  const [quantity, setQuantity] = useState(1);
  return (
    <button
      onClick={() =>
        dispatch(
          addToCart({
            id: item.id,
            title: item.attributes.title,
            quantity,
          })
        )
      }
    >
      <HiOutlineShoppingBag />
      <p className="text-bold">Add to cart</p>
    </button>
  );
};

export default CartButton;

最后是 Cart 组件： src/ui/Cart.js

"use client";
import React from "react"
import { useSelector } from "react-redux";

const Cart = () => {
  const products = useSelector((state) => state.cart.products);
  console.log(products); // IT LOGS THE ARRAY
  return (
    <div>
      <h1>Products in your cart</h1>
      {products?.map((item) => {
        <div>
          <h2>{item.id}</h2>
          <h3>hi</h3>
          <RiDeleteBin5Fill />
        </div>;
      })}
    </div>
  );
};

export default Cart;

问题是产品没有显示在 UI 中，即使我可以在 Cart.js 组件中的 map() 方法之前看到它在控制台中工作。任何人都可以告诉我我的整个代码有什么问题吗？

React Redux 不会在下一个 js 13 中更新 UI？

问题描述投票：0回答：0

最新问题

React Redux 不会在下一个 js 13 中更新 UI？

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0