Question

我的产品清单减速器如下：

const initialState = {
    products: [],

    productListSidebars: [],
    banners: ['enjoy.png', 'account.png']
}

export const ProductListReducer = (state = initialState, action) => {
switch (action.type) {
    case SET_PRODUCTS:
        const newState = state;
        newState.products = action.payload;
        console.log('newState', newState)
        return newState;
    }
}

当我在组件的render方法中记录从商店检索到的props.productList到控制台时，如下所示：

render() {
    console.log('props.prodList ', this.props.productList)
}

它显示以下内容：

{products: Array(0), productListSidebars: Array(3), banners: Array(2)}

如您所见，它表示数组props.productList.products包含0个数据。但是，当我在控制台中展开props.productList时，它表明props.productList.products实际上包含4个产品。

props.prodList  
{products: Array(0), productListSidebars: Array(3), banners: Array(2)}
products: Array(4)
0: {images: Array(1), categories: Array(0), _id: "5db6fc687c213e556144ae7b", name: "Signature Gold 
Collection Tailored Fit Herringbone Suit", price: 990, …}
1: {images: Array(1), categories: Array(0), _id: "5db6fd127c213e556144aecd", name: "Executive 
Collection Tailored Fit Suit", price: 790, …}
2: {images: Array(1), categories: Array(0), _id: "5db6fd997c213e556144aef5", name: "Executive 
Collection Traditional Fit Suit", price: 690, …}
3: {images: Array(5), categories: Array(0), _id: "5db6fa6c7c213e556144ad28", name: "Signature Gold 
Collection Tailored Fit Suit", price: 960, …}
length: 4
__proto__: Array(0)
productListSidebars: (3) [{…}, {…}, {…}]
banners: (2) ["enjoy.png", "bank-account.png"]
__proto__: Object

当我尝试如下图所示访问产品时，即使有上图所示的4种产品，它也会给我一个空数组：

const { products } = this.props.productList;
console.log('products', products)

Answer 1

更新必须是不可变的，您不能仅直接更改state。

immutable-update-patterns

switch (action.type) {
  case SET_PRODUCTS:
    return {
      ...state,
      products: action.payload
    }
}

Answer 2

我对redux不熟悉，但是在香草RxJS中，如果您未在执行操作时订阅对产品列表的更改，则您将不会收到更新，因为该列表应完全封装在商店中，并且您只会收到副本，而不是参考。

为什么我无法访问从redux商店获取的产品？

2 个答案: