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

React Redux 状态不替换

React Redux state not replacing

javascript

reactjs

redux

redux-thunk

react-redux