Что значить dispatch в данном коде? Почему мы записываем его не как аргумент?

Question

[rsoinvi]

Что значить dispatch в данной функции? Почему мы его не передаем как аргумент в скобках?

const funcName  = () = > dispatch => {
  return dispatch {
    type: NAME_TYPE,
    payload: lol
  }
}

Answer 1

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

Ваш пример написан некорректно. Исправленный вариант:

const funcName  = () = > dispatch => {
  return dispatch({
    type: NAME_TYPE,
    payload: lol
  });
}

Что значить dispatch в данном коде?

Это первый аргумент который использует функция, возвращаемая вашим AC:

dispatch => {
  return dispatch({
    type: NAME_TYPE,
    payload: lol
  });
}

Если подключен redux-thunk он перехватывает все функции возвращаемые AC и выполняет их, передавая первым аргументом store.dispatch.

Почему мы его не передаем как аргумент в скобках?

Если правильно вас понял, то при передаче одного аргумента парсер одинаково обрабатывает оба варианта записи:
const foo = (bar) => bar;
и
const foo = bar => bar;

Еще, в данном примере нет никакого смысла возвращать функцию, так как выполняются бессмысленные операции(перехват промежуточным ПО и новый диспатч), ваш AC можно сократить до:

const funcName  = () = > ({
  type: NAME_TYPE,
  payload: lol,
});

Comments

[rsoinvi]

Спасибо большое. Теперь понятно

Answer 2

[Максим]

Добавлю:

const funcName  = () => dispatch => {
  return dispatch({
    type: NAME_TYPE,
    payload: lol
  })
}

Превращается в:

var funcName = function funcName() {
  return function(dispatch) {
    return dispatch({
      type: NAME_TYPE,
      payload: lol
    });
  };
};

(это если было сложно прочитать)

Как уже ответили выше, dispatch становится доступным благодаря middleware redux-thunk. Для чего и зачем? Для того, чтобы мы могли "диспатчнуть" экшен в любой момент времени. Это обычно нужно для выполнения асинхронных запросов.

Пример:

export function getNews() {
  return dispatch => {
    dispatch(newsRequest())

    return httpGet(`news`) // начался асинхронный запрос
      .then(res => {
        if (checkResponse(res)) {
          dispatch(newsSuccess(res.data)) // когда завершился - вызываем dispatch, иначе откуда бы у нас в этой области видимости появилась переменная dispatch?
        } else {
          dispatch(newsFailure(res.message))
        }
      })
      .catch(error => {
        dispatch(newsFailure())
      })
  }
}