How does this AC work with async/await?

Question

React

Hi everyone I
have this code:

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

We declared here that the dispatch function is asynchronous and must wait until we get the comps variable. When received, can we execute the code further?
It turns out that it is equal to such a code?

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

No. In the first case, you return a function from AC with the dispatch argument .
In the second case, you return nothing and removed the dispatch argument , replacing it with the name. And the dispatch
function itself , which is passed to the argument, is just synchronous. Add a return and it will be similar to the first option:

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' });
  };
}

Another example: similarly:

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

How it works:

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

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

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

The value of a can be represented as follows: Your function is asynchronous and until comps resolves, its execution will not continue, since the call to comps returning the value is preceded by the keyword await .

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

As I understand it, you are having problems working with firebase ?
I can recommend using a ready-made library like https://github.com/prescottprue/react-redux-firebase
or figuring out the excellent redux-saga library and writing a convenient firebase interaction implementation with it .