Почему асинхронный запрос не выполняется?

Question

[dfv123]

1.Учусь обрабатывать асинхронные запросы, ловлю "items.map is not a function". В чем дело и как исправить? Мой код:
https://codesandbox.io/s/vj2m955q37
2. В догонку. Как сделать чтобы items, полученные с сервера, не перезаписывали items из initialState, а присоединялись к ним?
3. Когда и какой синтаксис стрелочных функций использовать?

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

vs

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

Answer 1

[Антон Спирин]

1. Поправьте mapStateToProps:

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

По-хорошему напишите селекторы.

2. Измените кейс FETCH_SUCCESS:

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. По возможности сокращенный вариант:

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

Comments

[dfv123]

Благодарю, как всегда на высоте!

Answer 2

[Роман Александрович]

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

Comments

[Антон Спирин]

Очень плохое решение.
1. Во-первых вы так и не починили ключи loading и error. Эти ключи всегда undefined, так как вы не стой стороны исправили проблему.
2. Нет никакого смысла оборачивать массив в Object.keys. Очень нелогичное решение.
Вместо:

{Object.keys(items.items).map(
  (el, ind) => < li key= { items.items[el].id } > { items.items[el].label }</li>
)}

достаточно:

{items.items.map(item => <li key={item.id}>{item.label}</li>)}

3. Вы мутируете в редьюсере массив items, причем опять же каким-то нелогичным способом. Если вы будете передавать в компонент только этот массив, компонент не будет обновляться.

[dfv123]

Антон Спирин, благодарю за конструктивную обратную связь.

[dfv123]

Роман Александрович, благодарю за помощь.