Запутался насчет Redux createAction и рассылка - PullRequest
Новая
       56

Запутался насчет Redux createAction и рассылка

0 голосов
/ 09 июня 2018

Я хочу создать в React + Redux функцию, которая, когда пользователь нажимает кнопку, вызывает API и загружает данные в хранилище, а затем отображает данные на странице.

Я хочуиспользуйте redux-actions framework: https://redux -actions.js.org / , но я немного запутался в различных примерах, которые я видел.

В некоторых примерах я вижуследующее: 

export const GET_USER_DATA = 'GET_USER_DATA';
export const getUserData = createAction(
  GET_USER_DATA,
  async () => {
      try {
          return await getUserInfo(config);
      } catch (error) {
          console.log("Error occurred");
      }
  },
);

, а затем я видел другие примеры, которые используют dispatch, как это (взято из: https://codeburst.io/redux-actions-through-example-part-3-91dc41ebe4be):

const fetchPhraseRequest = createAction('PHRASE_FETCH_REQUEST');
const fetchPhraseResponse = createAction('PHRASE_FETCH_RESPONSE');
export const clearPhrase = createAction('PHRASE_CLEAR');
export const fetchPhrase = () => (dispatch) => {
  dispatch(fetchPhraseRequest());
  fromAPI.getPhrase()
    .then((value) => {
      dispatch(fetchPhraseResponse(value));
    })
    .catch((err) => {
      dispatch(fetchPhraseResponse(err));
    });
};

Я новичок в React и Reduxи я пытаюсь понять, почему / когда вы будете делать одно или другое ..

У меня есть вопрос о первом примере: - без вызова dispatch сможет ли редуктор выполнить это действие?Если это так, как это работает без отправки вызова?

1 Ответ

0 голосов
/ 09 июня 2018

Я не очень знаком с библиотекой redux-actions, но я думаю, что в первом примере вы создаете действие, но с полезной нагрузкой.полезная нагрузка - это то, что возвращается из асинхронной функции вашего создателя.Вторая часть (функция) здесь - payloadCreator.Я говорю это, посмотрев соответствующий код: https://github.com/redux-utilities/redux-actions/blob/master/src/createAction.js

Так что для первого примера все остальное течет как обычно.Это createAction создает действие с полезной нагрузкой, использует его в handleActions.Итак, на ваш последний вопрос, нет, не позвонив диспетчеру, редуктор не может знать, что происходит.Вы не беспокоитесь об отправке здесь, так как вы все равно делаете это в своем приложении.Но я не вижу подобного примера в документации к библиотеке или в руководствах ее создателя.

Во втором примере мы используем здесь redux-thunk для выполнения асинхронных заданий и нескольких действий.Таким образом, мы можем использовать асинхронные задания и выполнять несколько условных действий в нашем создателе действий.Как отправка различных действий создателей.fetchPhraseRequest () и fetchPhraseResponse () являются двумя различными действиями здесь и отправляются для различных ситуаций.Может быть, сначала запускается процесс и устанавливается состояние «выборка», затем второй получает ответ и правильно устанавливает состояние.Мы можем даже использовать другое отдельное действие по ошибке, например fetchPhraseError () в блоке ошибок.

Если ваша цель - более глубоко переварить Redux, я предлагаю поработать с чистым Redux с redux-thunk.Вы поймете весь асинхронный процесс, по крайней мере, он работал для меня.

...