React 在异步调用中分派一个方法

Question

如何在 React 异步调用中调度 redux 函数。当我调用分派函数 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);
    });
}

我只想调用 UpdateContact 中的 updatingcontact() 函数并调用 reducer 在 UI 中显示更新消息。

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

Answer 1

如 HMR 所述，您应该使用 redux-thunk 在 redux 操作中进行异步调用。

最简单的方法是查看 redux toolkit，它正在为您安装所有标准的 redux 中间件（包括 redux-thunk）

Answer 2

您需要使用一些异步中间件，例如 redux-thunk 来进行异步 API 调用。使用 redux 的高阶函数 connect 会将您的 React 组件连接到 redux 存储。

你的 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 }
      })
    }
  }
}

在那之后，无论您的组件需要什么，它都可以在 redux 商店中使用。从您的 UpdateContact 组件到 dispatch，您只需要这样做：

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)

请注意，如果您不向 connect 提供 mapDispatchToProps，您仍然可以在组件中使用 dispatch，因为它默认可用.

如果您提供 mapDispatchToProps，您现在从组件发送的方式将是 - this.props.updatingContact()。

mapDispatchToProps 只是将 action creators 与 dispatch 绑定在一起，并将这些新的绑定函数作为 props 传递给组件。

React 在异步调用中分派一个方法

React dispatch a method in async call

asynchronous

middleware

reactjs

redux