0

I'm confused with that redux thunk action:

import axios from 'axios';

export const GET_CHANNELS = 'GET_CHANNELS'

export const getChannels = () => async (dispatch, getState) => {
    const res = await axios.get('https://v-forum-api.bahdcasts.com/api/channels')
    dispatch({
        type: GET_CHANNELS,
        payload: res.data
    })
}

What does the following construct mean?

const getChannels=()=>async()=>{}

Can you please provide any article link for that expression? Thank you

CherryDT
  • 25,571
  • 5
  • 49
  • 74
Nub Coder
  • 25
  • 1
  • 3
  • It's a function that returns a function (async in this case). Read the redux-thunk documentation. – Ori Drori Mar 15 '20 at 10:05
  • 1
    Does this help? https://stackoverflow.com/a/42964310/1871033 - https://www.w3schools.com/js/js_arrow_function.asp – CherryDT Mar 15 '20 at 10:07
  • Does this answer your question? [Syntax for async arrow function](https://stackoverflow.com/questions/42964102/syntax-for-async-arrow-function) – Lauren Yim Mar 15 '20 at 12:19

2 Answers2

3

It is a function that returns another (async) function.

Ignoring the differences in semantics of this between arrow functions and regular functions, a possibly clearer way to write the same thing with regular functions would be:

const getChannels = function () {
  return async function (dispatch, getState) {
    // ...
  }
}

The caller would call getChannels() and get a function back, which could then be called as well.

const innerFunction = getChannels()
await innerFunction(dispatch, getState)
CherryDT
  • 25,571
  • 5
  • 49
  • 74
0

const getChannels = () => async() => {}

is somehow equal to:

function getChannels() {
  return async function() {

  }
}

using arrow functions (which changes the usage of this) & getChannels is constant block-leveled variable.

F.NiX
  • 1,457
  • 3
  • 12
  • 20