CODEWITHSUNDEEP
reactjsreact-reduxconcatenation
Nemus
Nemus

Reputation: 3995

Concat arrays in redux reducer

I'm using an Unsplash API, and trying to make pagination. I don't want to replace one page with another, but to call more images results and concate it to an existing ones. This is my action:

export const getUnsplashImages = (page = 1) => async (dispatch) => {
  dispatch({ type: GET_UNSPLASH_LOADING });
  try {
    const { data } = await unsplashUrl.get(
      `${Constants.UNSPLASH_PHOTOS}?page=${page}&${Constants.UNSPLASH_CLIENT_ID}&per_page=13`
    );
    dispatch({ type: GET_UNSPLASH, payload: data });
  } catch (error) {
    dispatch({ type: GET_UNSPLASH_ERROR });
  }
};

And I'm trying to do the concatenation in reducer:

const initState = {
  images: [],
  loading: false,
  error: '',
};

export default function (state = initState, action) {
  switch (action.type) {
    ...
    case GET_UNSPLASH:
      console.log('STATE', state);
      return {
        ...state,
        loading: false,
        images: [...state.images, action.payload],
      };
    ...
    default:
      return state;
  }
}

But I'm getting an array inside an array. I tried to do it like this images: [...state.images, ...action.payload], But result is not as I expected. I'm getting a result of 26 images, instead of concatenating the results

Upvotes: 1

Views: 1747

Answers (1)

KT-mongo
KT-mongo

Reputation: 2212

Assuming payload: data is an array that you want to concat within images, you need to spread it:

images: [...state.images, ...action.payload]

Upvotes: 2

Related Questions