Как работает этот AC с async/await?

Question

[Nikita Shchypylov]

Всем привет
Есть такой код :

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref("components");
  comps.push({
    name: data.component,
    comp: data.component_name
  });
};

Мы тут объявили, что ф-я dispatch асинхронная и должны подождать, пока получим переменную comps. Когда получили, то можем исполнять код дальше?
Получается, он равен такому коду?

export const addComponent = data => {
  async function dispatch() {
    let comps = await fire.database().ref("components");
    comps.push({
      name: data.component,
      comp: data.component_name
    });
  };
}

Answer 1

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

Нет. В первом случае вы возвращаете из AC функцию c аргументом dispatch.
Во втором случае вы не возвращаете ничего и убрали аргумент dispatch, заменив названием.
А сама функция dispatch, которая передается в аргумент, как раз синхронная.

Добавьте return и будет аналогично первому варианту:

export const addComponent = data => {
  return async function(dispatch) {     //  тут добавлен return и аргумент
    let comps = await fire.database().ref("components");
    comps.push({
      name: data.component,
      comp: data.component_name
    });

     //так же в любое время вы можете вызвать dispatch
     dispatch({ type: 'someAction', payload: 'someValue' });
  };
}

Еще пример:
const foo = x => y => x + y;
аналогично:

const foo = x => {
  return  y => {
    return x + y;
  }
};

Как это работает:

const foo = x => y => x + y;

const a = x(5);
const b = a(6);

console.log(b);
// => 11

Значение а можно представить так:
y => 5 + y;

Функция у вас асинхронная и пока не зарезолвится comps ее выполнение не продолжится, так как перед вызовом возвращающим значение comps стоит ключевое слово await.

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref("components");
  // функция продолжит выполнение только когда вернется значение присвамваемое comps
  comps.push({
    name: data.component,
    comp: data.component_name
  });
};

Как я понимаю у вас возникли проблемы при работе с firebase?
Могу порекомендовать использовать готовую библиотеку, вроде https://github.com/prescottprue/react-redux-firebase
или разобраться с отличной библиотекой redux-saga и написать с помощью нее удобную реализацию взаимодействия с firebase.

Comments

[Nikita Shchypylov]

Спасибо, теперь всё понятно
Вы мне в первый раз рекомендовали redux-saga, я тогда первый проект и сделал на redux saga. Сейчас решил нативно попробовать
Меня смущало то, что WebStorm подсвечивал dispatch как неактивную ф-ю.
Кстати, а ести мы добавляем потом return dispatch({...}) , то получается возвращаем второй раз функцую dispatch?

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

Nikita Shchypylov, аааа. Извините, я ошибся когда пример писал! Поправил.
dispatch - это функция dispatch передаваемая аргументом, которую вы можете вызвать в своей функции. Например, вернув значения записать их в store.