如果我在redux存储中添加单个reducer，它可以正常工作，但当我在我的存储中添加第二个reducer或将单个red

Question

{我正在做一个MERN堆栈项目。在我的前端，我使用redux状态管理。但我面对的是从后端获取产品，如果我在redux商店中添加单个减速器以获取所有产品，它工作正常，但当我添加第二个减速器以获取产品详细信息或在我的商店中将单个减速器包装在括号中时，它显示错误并获取所有产品也给出{products: Array(0)， loading: false, error: "}

误差

Uncaught TypeError: products.map is not a function
at ProductList (ProductList.jsx:31:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

这是我的代码

store.js

import { configureStore } from "@reduxjs/toolkit";
import { productSlice, productDetailSlice } from "./Slice/ProductSlice.js";
const store = configureStore({
reducer: {
products:productSlice.reducer,
productDetails:productDetailSlice.reducer
},
});
export default store;

ProductSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
export const getProducts = createAsyncThunk(
"products/getProducts",
async () => {
const res = await axios.get("/product/");
return res.data;
}
);
export const getProductDetails = createAsyncThunk(
"productDetail/getProductDetails",
async (id) => {
const res = await axios.get(`/product/${id}`);
return res.data;
}
);
export const productSlice = createSlice({
name: "products",
initialState: {
products: [],
loading: false,
error: "",
},
reducers: {},
extraReducers: {
[getProducts.pending]: (state, action) => {
state.loading = true;
},
[getProducts.fulfilled]: (state, action) => {
state.loading = false;
state.products = action.payload.products;
},
[getProducts.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
},
});
export const productDetailSlice = createSlice({
name: "productDetail",
initialState: {
loading: false,
productDetail: [],
error: null,
},
reducers: {},
extraReducers: {
[getProductDetails.pending]: (state, action) => {
state.loading = true;
},
[getProductDetails.fulfilled]: (state, action) => {
state.loading = false;
state.productDetail = action.payload.product;
},
[getProductDetails.rejected]: (state, action) => {
state.loading = false;
state.error = action.payload;
},
},
});

ProductList.jsx

import React, { useEffect } from "react";
import Banner from "../../Components/Banner/Banner";
import Footer from "../../Components/Footer/Footer";
import Heading from "../../Components/Heading/Heading";
import Navbar from "../../Components/Navbar/Navbar";
import Product from "../../Components/Product/Product";
import "./productlist.css";
import { useDispatch, useSelector } from "react-redux";
import { getProducts } from "../../Redux/Slice/ProductSlice.js";
import Loader from "../../Components/Loader/Loader";
const ProductList = () => {
const products = useSelector((state) => state.products);
console.log(products);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProducts());
}, []);
return (
<div>
<Banner />
<Navbar />
{products.loading ? (
<Loader />
) : (
<div className="container">
<div className="filters"></div>
<div className="products">
<div className="list">
{products.map((product) => (
<Product
key={product._id}
name={product.name}
price={product.price}
seller={product.seller}
images={product.images}
id={product._id}
/>
))}
</div>
</div>
</div>
)}
<Footer />
</div>
);
};
export default ProductList;

export default ProductList

ProductDetails

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getProductDetails } from "../../Redux/Slice/ProductSlice.js";
const ProductDetails = ({ match }) => {
const product = useSelector((state) => state.product);
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProductDetails(match.params.id));
}, []);
let price = 279.95;
return (
<div>

</div>
);
};
export default ProductDetails;
export default ProductDetails

Answer 1

从

const store = configureStore({
reducer: productSlice.reducer,
});

const store = configureStore({
reducer: {
products: productSlice.reducer
},
})

你改变了你的状态的形状。

原来的state.loading现在是state.products.loading-，原来的state.products现在是state.products.products。

你必须相应地改变你的选择器。