Why asynchronous request fails?

Question

React

1. I am learning to process asynchronous requests, I catch "items.map is not a function". What's the matter and how to fix it? My code:
https://codesandbox.io/s/vj2m955q37
2. In pursuit. How to make items received from the server not overwrite items from initialState, but join them?
3. When and what arrow function syntax to use?

export const fetchProductsBegin = () => ({
  type: FETCH_BEGIN
});

versus

export const fetchBegin = () => {
  return {
    type: "FETCH_BEGIN"
  };
}

Answer 1

1. Fix mapStateToProps :

const mapStateToProps = state => {
  return {
    items: state.items.items,
    error: state.items.error,
    loading: state.items.loading
  };
};

Write selectors in a good way.
2. Change the FETCH_SUCCESS case :

export function items(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {

    // some code

    case "FETCH_SUCCESS":
      return { 
        ...state,
        items: [ ...state.items, ...payload.items ],
        loading: false,
      };

     // some code

  }
}

3. If possible, an abbreviated version:

export const fetchProductsBegin = () => ({ type: FETCH_BEGIN });

const mapStateToProps = state => ({
  items: state.items.items,
  error: state.items.error,
  loading: state.items.loading,
});

https://codesandbox.io/s/jprm2omlr5

Answer 2

https://codesandbox.io/s/73078n25qj