Реагировать отправлять метод в вызове asyn c

Question

Как отправить функцию приведения в ответ на асинхронный вызов c. Когда я вызываю функцию отправки dispatch(updatingcontact(), я получаю сообщение об ошибке, что отправка не определена.

const UpdateContact = async (URL, method, type, address) => {
dispatch(updatingcontact()
const APIResponse = await fetch(URL, {
    method: POST,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    body: JSON.stringify({
        "webContacts": {
            "address": address
        }
    })
})
    .then(response => {
        if (!response.ok) {
            return Promise.reject(response.statusText);
        }
        return response.json();
    })
    .then(status => {
        return status
    })
    .catch(error => {
        console.log(error);
    });
}

Я просто хочу вызвать функцию updatingcontact() внутри UpdateContact и вызвать редуктор для отображения сообщения об обновлении в пользовательском интерфейсе.

function updatingcontact() {
return {
    type: ACTIONTYPES.UPDATING_CONTACT
 }
}

Answer 1

Как упомянуто в HMR, вы должны использовать redux-thunk , чтобы иметь асин c вызовы в действиях избыточности.

Самое простое - взглянуть на redux toolkit , который устанавливает для вас все стандартное промежуточное программное обеспечение Redux (включая redux-thunk)

Answer 2

Для выполнения асинхронных вызовов API необходимо использовать какое-то промежуточное программное обеспечение asyn c, например redux-thunk. Использование функции высшего порядка connect соединит ваш компонент React с хранилищем резервов.

Ваш thunk будет выглядеть примерно так:

Обратите внимание, что Redux передаст аргумент dispatch функции thunk для диспетчеризации действий.

export const updatingContact = (url, address) => {
  return async (dispatch) => { 
    dispatch({ type: ACTIONTYPES.UPDATING_CONTACT_STARTS }) // for showing spinner or loading state in your component

    try {
      const response = axios.post(url, {
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },

        body: JSON.stringify({
          webContacts: {
            address: address
          }
        })
      })

      dispatch({
        type: ACTIONTYPES.UPDATING_CONTACT_SUCCESS,
        data: { updatedContactList: response.data.updatedContactList }
      })
    } catch (error) {
      dispatch({
        type: ACTIONTYPES.UPDATING_CONTACT_ERROR,
        data: { error: error }
      })
    }
  }
}

После этого, независимо от того, что нужно вашему компоненту, он доступен в магазине приставок. Чтобы dispatch из вашего UpdateContact компонента, вам просто нужно сделать это:

import { updatingContact } from "./actions.js" 

class UpdateContact extends Component {

  componentDidMount() {
      this.props.dispatch(updatingContact()) 
  }

  render() { 
    const {address, phoneNumber } = this.props
    return (
      <div>
        Adress: {address}
        Phone No.: {phoneNumber}
      </div>
    )
  }


const mapStateToProps = () => {
  // return whatever you need from the store like contact details, address, etc
  address: state.updatingContactReducer.address,
  phoneNumber: state.updatingContactReducer.phoneNumber
}

export default connect(mapStateToProps)(UpdateContact)

Обратите внимание, что если вы не предоставите mapDispatchToProps до connect, вы все равно будете возможность использовать dispatch в вашем компоненте, потому что он доступен по умолчанию.

Если вы предоставите mapDispatchToProps, то способ, которым вы теперь будете отправлять данные из своего компонента, будет- this.props.updatingContact().

mapDispatchToProps просто связывает создателей действий с диспетчеризацией и передает эти новые связанные функции как реквизиты компоненту.