Замена возврата на отправку вызывает ошибку

Question

Глядя на простое приложение, я пытаюсь понять Redux. Вы можете найти приложение здесь: простое приложение Redux

Документация Redux гласит: «Единственный способ изменить состояние внутри хранилища - отправить действие »

Но создатель экшена в этом приложении выглядит так:

export const selectSong = song => {
  return {
    type: "SONG_SELECTED", 
    payload: song 
  };
};

Очевидно, действие не отправлено. Возвращено Итак, я подумал, что произойдет, если я изменю функцию так, чтобы она отправляла действие:

export const selectSong = song => {
  dispatch({
    type: "SONG_SELECTED", 
    payload: song 
  });
};

Но это вызывает следующую ошибку:

Не удалось скомпилировать ./src/actions/index.js Строка 4: «отправка» не определена no-undef

Может кто-нибудь объяснить, почему?

Answer 1

Ошибка в том, что dispatch нигде не определен. Redux сам по себе (без промежуточного ПО) ожидает объекты, описывающие действия. Диспетчеризация в вашем примере кода ограничена редукцией с react-redux connect функцией более высокого порядка, поэтому вам не нужно явно вызывать dispatch.

Форма диспетчерских действий, использующая диспетчеризацию в явном виде, которую я видел только при использовании промежуточного программного обеспечения, такого как redux-thunk.

перевождь-преобразователь :

Thunks - рекомендуемое промежуточное ПО для основных побочных эффектов Redux логика, включая сложную синхронную логику, которая требует доступа к хранить и использовать простую асинхронную логику, например запросы AJAX.

Это означает, что вы можете возвращать функции.

И вместо:

export const selectSong = song => {
  return {
    type: "SONG_SELECTED", 
    payload: song 
  };
};

Вы можете:

export const selectSong = song => {
  return (dispatch, getState) => {
    const { songs } = getState() // You can access state with getState
    dispatch({
      type: "SONG_SELECTED",
      payload: song
    });
  };
};

Вот ссылка на ваш пример кода с redux-thunk:

https://codesandbox.io/s/1pr283o8l

А вот еще одна ссылка на 'redux' с похожим кодом thunk:

https://redux.js.org/advanced/async-actions#actionsjs-asynchronous

Answer 2

На самом деле действие отправляется сюда.

Функция подключения обычно получает 1 или 2 аргумента:

Первый аргумент: функция, которая отбирает части состояния из Redux и назначает их реквизитам, которые будет использовать ваш компонент React.

Второй аргумент: функция, которая связывает функции создателя действия, так что вам не нужно писать props.dispatch (actionName ()) повсюду, вы можете просто написать props.actionName ()

https://daveceddia.com/redux-mapdispatchtoprops-object-form/

Answer 3

С удовольствием, так что здесь у вас есть создатель действия, который возвращает объект действия, и в этом объекте действия у вас есть свойства type и payload.

Чтобы иметь возможность превратить вашего создателя действия в того, кто может вернуть функцию вместо объекта действия, вам нужно решить, собираетесь ли вы установить промежуточное программное обеспечение, такое как redux-thunk, и внести его в микс.

Именно из этой библиотеки мы получаем аргументы dispatch и getState, которые мы можем использовать для передачи функции вместо объекта действия от наших создателей действия.

После того, как вы импортировали и установили redux-thunk, я полагаю, вам придется реорганизовать создателя ваших действий следующим образом:

До:

// Action creator
export const selectSong = (song) => {
  // returns an action
  return {
    type: 'SONG_SELECTED',
    payload: song
  };
};

После того, как:

export const selectSong = (song) => async dispatch => {
  const response = await songsAPI.get("/songs");
  dispatch({ type: "SONG_SELECTED", payload: song });
};

Теперь я не знаю, выбираете ли вы песню из внешнего API, но я написал код таким образом, чтобы подчеркнуть, что это то, что вы реализуете, когда вы хотите разрабатывать асинхронные создатели действий, что также использования промежуточного программного обеспечения, такого как redux-thunk, и таким образом рефакторинг создателя действий, поскольку Redux не выполняет асинхронные запросы из коробки.

Обратите внимание, что я не использую getState здесь в качестве аргумента, потому что, если он вам не понадобится, тогда, пожалуйста, не определяйте его, но если вы используете VS Code, то должна быть кричащая кривая о том, что вы Я не использовал аргумент, или getState должно быть затенено, указывая, что вы его нигде не использовали, это подсказка, его высказывание не указывайте, если вы не собираетесь его использовать.