Почему возникает Actions must be plain objects без ReduxThunk?

Question

[Nikita Shchypylov]

Всем привет
Такой AC для обработки асинхронного запроса :

export const searchAction = (val:string) => async dispatch => {
	const root:string = "https://images-api.nasa.gov/";
	const res = await axios.get(`${root}/search?q=${val}`);
	return dispatch({
		type: consts.SEARCH_INIT,
		payload: res
	})
};

Ошибка : Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
Но ведь я возвращаю обычный объект в переменной res. Почему тогда код не работает без ReduxThunk?
Спасибо

Comments

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

так откуда взяться диспачу (async dispatch) без ReduxThunk.
ReduxThunk как раз и нужен что бы вы могли вот таким образом прокидовать диспатчи в функцию
export const searchAction = (val:string) => async dispatch => {

Answer 1

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

Потому что redux-thunk это middleware и если бы вы заглянули в его исходники(всего 14 строк), то вы бы увидели, что он перехватывает и вызывает функции, передавая в них нужные аргументы и возвращает результат, не предавая его дальше. Без него их перехватывать нечему и они попадают туда куда не должны попадать и провоцируют ошибку, так как Redux без мiddleware на вход в dispatch принимает только объекты, о чем и говорится в тексте ошибки, которую вы получаете.

Возвращаемое значение(return) в асинхронных действиях используется только вами, его возвращает вызов dispatch. В редьюсеры, как было озвучено выше, оно не попадает.
Так как возвращается Promise, его можно использовать как-то так:
Ваш Async action:

export const asyncAction = (...someArgs) => async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
};

Использование в коде(явный пример с dispatch):

componentDidMount() {
  const { dispatch } = this.props;

  dispatch(asyncAction(...optionalArgs)).then(result => doSomething(result));
}

То же самое с проброской async action через connect:

componentDidMount() {
  const { asyncAction } = this.props;

  asyncAction(...optionalArgs).then(result => doSomething(result));
}

Вообще, для использования then значение из асинхронной функции возвращать совсем не обязательно и такой код тоже будет прекрасно работать:

export const asyncAction = (...someArgs) => async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });
};

Использование в коде(явный пример с dispatch):

componentDidMount() {
  const { dispatch } = this.props;

  dispatch(asyncAction(...optionalArgs)).then(() => doSomething());
}

Comments

[Nikita Shchypylov]

Спасибо большое за дополнение!

[Nikita Shchypylov]

Антон, можно еще минутку вашего внимания?

В моём коде :

export const asyncAction = (...someArgs) => async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
};

Ф-я dispatch - это ф-я redux и я её передал аргументом, то есть могу вызывать в теле функции. При вызове она выполнить своё тело функции и вернёт результат. Почему тогда такой вариант не работает ?

const test = (arg) => {
	return arg
};

const final = (arg) => test => {
	test(arg)
}

final("test");

Почему при вызове final("test") я не получаю test? Ведь смысл-то тот же

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

Nikita Shchypylov, во-первых функция test у вас никак не используется, так как в функции final test это аргумент возвращаемой ей функции и он никак не связан с функцией test.
Смотрите как это работает:
Сохраним вызов final в переменную foo:

const final = (arg) => test => {
  test(arg)
}

const foo = final("test");

Теперь foo присвоен результат вызова final, это функция:

test => {
  test("test");
}

Аргумент arg принял значение "test" и только теперь можно использовать аргумент test.
Куда можно передать скажем console.log:
foo(console.log); // вывод в консоль: "foo"

Банальный пример:

const one = x => y => z => x + y + z ;
const two = one(5);

Значение two:
y => z => 5 + y + z ;
Далее:
const three = two(10);
Значение three:
z => 5 + 10 + z ;
Вот у нас и вернулась функция, которая возвращает значение из двойного замыкания:
console.log(three(20)); // 35

Как то так.

Что до dispatch, то когда вы предаете в dispatch свой async action вы делаете такой вызов:
dispatch(asyncAction());

В сам dispatch приходит такая функция:

async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
};

Которую перехватывает redux-thunk и возвращает вам обратно результат ее вызова передав на вход функцию dispatch и еще два аргумента:

if (typeof action === 'function') {
  return action(dispatch, getState, extraArgument);
}

action это ваша функция.

Надеюсь, теперь стало понятней. Спрашивайте если, остались вопросы.

Вот еще. Важно понимать отличие:

const foo = test => {
  test("test");
}

и
const bar = test => test("test");
Второй вариант в полной записи выглядит так:

const bar = test => {
  return test("test");
}

и как видно он возвращает значение функции аргумента, в отличии от первого варианта, который ничего не возвращает.

[Nikita Shchypylov]

Антон Спирин, Супер, спасибо большое!
1) По поводу замыканий - все ясно
2) То есть, еще раз по циклу, когда я возвращаю из AC не объект, а ф-ю.
При вызове AC из компонента (например, this.props.myAc("data")) я делаю первое замыкание тут :

export const asyncAction = (...someArgs) => async dispatch => {}

Второе перехватывает ReduxThunk. Он видит, что это ф-я, выполняет её и р-ты передаёт в
return action(dispatch, getState, extraArgument); ?
Как-то так?
По вопросам :
1) Где именно ReduxThunk резолвит мои Промисы и тд?
2) Где именно данные, которые вернул Promise? Они в каком-то из аргументов тут?
return action(dispatch, getState, extraArgument);
3) Вы уверены насчёт arrow ф-й? Вроде бы, arrow неявно вызывает return, если написана в одну линию

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

1. redux-thunk не резолвит промисы, он просто возвращает вам результат вызова асинхронной функции, которую вы ему передаете, та самая строчка:
return action(dispatch, getState, extraArgument);
И если там есть асинхронный вызов(запрос к серверу, например), то промис возвращается еще не зарезолвеный и чтобы выполнить код именно тогда, когда он будет зарезолвен используется метод then.
2. Вы немного не поняли суть. Вы совершаете вызов:
this.props.myAc("data"));
это аналогично:
dispatch(myAc('data'));
или:
dispatch(async dispatch => { ... });
Теперь возвращаемся к строке:
return action(dispatch, getState, extraArgument);
Ее в нашем случае можно заменить на вызов:

return (async dispatch => { ... })(dispatch, getState, extraArgument);

Наша функция обрабатывает только первый аргумент, но туда еще передается метод getState и опциональный extraArgument, если он был передан при инициализации redux-thunk.

Строка:
return action(dispatch, getState, extraArgument);
это всего лишь вызов функции которую возвращает ваш async action.
3. Все верно стрелочные функции в короткой форме возвращают значение:

const test = () => 'test';

const foo = func => func();

console.log(foo(test)); // test

Но в такой записи значение не возвращается:

const test = () => 'test';

const bar = func => {
   func();
}

console.log(bar(test)); // undefined

В случае с асинхронными функциями они всегда возвращают Promise, даже если в них нет return. В таком случае Promise вернет по резолву undefined:

const foo = async () => {
  await someDelay();
};

// undefined по резолву(окончанию вызова  someDelay())
foo().then(result => console.log(result));

[Nikita Shchypylov]

Антон Спирин,

Строка:
return action(dispatch, getState, extraArgument);
это всего лишь вызов функции которую возвращает ваш async action.

Так, после вызова ф-и, когда мы уже вернули значение объектом, например :

{
  type: "INIT",
  foo
}

этот объект идет как аргумент в параметр dispatch ф-и action? B уже оттуда мы в редюсерах получаем данные?

2) По стрелочным понятно, спасибо

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

Nikita Shchypylov, нет почему, у вас же перехватывается только async action, а объекты идут на следующий middleware если он есть и далее попадают в редьюсеры.
В примере с:

export const asyncAction = (...someArgs) => async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
};

на вход попадает функция:

async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
};

И строку return action(dispatch, getState, extraArgument); можно привести к виду:

return (async dispatch => {
  const res = await someAsyncCall(...someArgs);
  dispatch({ type: SOME_ACTION_TYPE, payload: res });

  return res;
})(dispatch, getState, extraArgument);

Где значение ...someArgs уже передано и берется из замыкания или не передано и undefined.

[Nikita Shchypylov]

Антон Спирин, Все, теперь понял :) Спасибо большое!