React Redux状态不替换

Question

我正在尝试通过操作来获取新一批产品，然后用新批次替换状态，但是它只是将其添加到阵列中...

这是我控制状态的减速器：

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

请参阅此处以了解有关spread operator说明： https : //ponyfoo.com/articles/es6-spread-and-butter-in-depth