React Redux状态不替换

Question

I am trying to fetch a new batch of products through an action and then replace the state with the new batch, however it just adds it to the array...

Here's my reducer for controlling the state:

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
}

It goes wrong in the fulfilled case.. I am not sure how this "...state" works, do I need to do a object assign or something?

Upon load I get 52 products, when trying to request a new batch it adds it up so my this.props.products is 104 items... I want it to replace

Answer 1

This line is the culprit

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

In this case all you want to do is replace the Products array with the one from the action.

So it should be simply

Products: action.payload.data.Products

See here for a nice explanation on the spread operator : https://ponyfoo.com/articles/es6-spread-and-butter-in-depth