React-Redux why when I set up a middleware the object is returned twice when is called

Question

This is the 2 objects when a make a axios fetch and then set the response.data into the store

My Question is if this is normal, because the default State is empty, so first return the empty object and then the filled object, how can i solve tha or is something happening for a bit delayed request.

Answer 1

The problem there is that at the begining your initial state is '[]' it does not has anything. the request is made and now your state is state = { initialState //which is an empty array }

then you do a request again an state is equals to whatever state has plus and array of products

state = { [], products }

you have two choices. remove products from the switch or add it at the initial state

const initialState = {
   products: []
}


export function reducer (state = initialState, action) {

   swtich (action.type) {
     case 'getAllProducts':
     return {
       products:[...action.payload]
     }

   }

}