Почему вызываемая функция action обернута внутри dispatch в реакции? - PullRequest
Новая
       12

Почему вызываемая функция action обернута внутри dispatch в реакции?

1 голос
/ 04 октября 2019

Я просто просматривал некоторый код реагирования-редукса в Интернете, и в основном я наткнулся на следующий набор кода, который в основном представляет собой js-файл, заполненный ACTIONS, просто чтобы дать некоторому контексту комбинацию избыточности и избыточности-thunkиспользуется здесь: 

export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  await dispatch(getConfig());
  await dispatch(getGenres());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

// Action Creator to get the config object from the API
export const getConfig = () => async dispatch => {
  const res = await tmdbAPI.get('/configuration');
  dispatch({
    type: TYPES.GET_CONFIG,
    payload: res.data,
  });
};

Я немного сбит с толку относительно того, почему функция getConfig заключена в dispatch?

Ответы [ 2 ]

1 голос
/ 04 октября 2019

если не хотите, не оборачивайте это вот так 

export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  dispatch(await getConfig());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

//this is not using redux-thunk

// Action Creator to get the config object from the API
export const getConfig = async () => {
  const res = await tmdbAPI.get('/configuration');
  return {
    type: TYPES.GET_CONFIG,
    payload: res.data,
  };
};

Важно
но естьЕсть так много причин, почему обернуть действия по отправке.

Вот один пример.

, когда вы хотите получить несколько данных в одном действии шаг за шагом 

export const getData = () => async dispatch => {
  dispatch({
    type: DATA_LOADING_START
  });
  try {
    const res = await tmdbAPI.get('/url1');
    dispatch({
      type: DATA1_LOADED,
      payload: res.data,
    });
    const res = await tmdbAPI.get('/url2');
    dispatch({
      type: DATA2_LOADED,
      payload: res.data,
    });
  } catch (err) {
    // handle error
  }
  dispatch({
    type: DATA_LOADING_END
  });
};
//this is using redux-thunk

@ AlexanderSolonik
Вопрос: Зачем переносить действия по рассылке?

, поскольку dispatch() отправляет результат действияк редуктору. enter image description here

0 голосов
/ 04 октября 2019

Redux thunks - это просто избыточные действия, которые могут вызывать побочные эффекты. Так что 

export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  await dispatch(getConfig());
  await dispatch(getGenres());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

Это просто асинхронная функция инициализации, которая при вызове выполняет шаги синхронно.

Ключ в том, что thunks может отправлять другие thunks / actions / etc, поэтому init thunkпросто отправляет действие getConfig(), которое само по себе является асинхронным, поэтому следующий шаг функции init не будет выполнен, пока не завершится вызов config API (возможно, потому что от него зависит какой-то другой код)

...