javascript - React Redux 状态不替换

Question

我试图通过操作获取一批新产品，然后用新批处理替换状态，但它只是将其添加到数组中...

这是我用于控制状态的 reducer :

const initialState = {
  fetching: false,
  fetched: false,
  Brands:[],
  Markings:[],
  Products: [],
  error: null
}

export default function reducer(state=initialState, action=null) {
  switch (action.type){

    case "FETCH_PRODUCTS_PENDING" : {
      return {...state}
      break;
    }
    case "FETCH_PRODUCTS_REJECTED" : {
      return {...state}
      break;
    }
    case "FETCH_PRODUCTS_FULFILLED" : {
      return{ ...state, 
        Products: state.Products.concat(action.payload.data.Products),
        Brands: action.payload.data.Facets[0].Facets,
        Markings: action.payload.data.Facets[1].Facets
      }
      break;
    }
  }
  return state
}

在已完成的情况下会出错。我不确定这个“...状态”是如何工作的，我是否需要进行对象分配或其他操作？

加载后我得到 52 个产品，当尝试请求新批处理时，它会将其添加起来，因此我的 this.props.products 是 104 个项目...我希望它替换

Answer 1

这条线是罪魁祸首

Products: state.Products.concat(action.payload.data.Products),

在这种情况下，您所需要做的就是将 Products 数组替换为操作中的数组。

所以应该很简单

Products: action.payload.data.Products

请参阅此处有关扩展运算符的详细解释: https://ponyfoo.com/articles/es6-spread-and-butter-in-depth