Question

在以下代码中，＆＃39;回调＆＃39;参数是我的组件中的一个函数，它调用了动作创建器，但是我似乎无法找到在我的动作创建器中唤起此回调的位置。我使用ReduxThunk来实现异步功能。

我的主要目标是在成功请求后触发回调。

import axios from 'axios';
export const FETCH_USERS = 'FETCH_USERS';
const API_URL_TOP30 = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';
const API_URL_ALLTIME = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';

export function fetchUsers(list, callback) {
  const apicall = (list) ? API_URL_ALLTIME : API_URL_TOP30
  const data = ''
  const request = axios.get(apicall)

  return (dispatch) => {
    request.then(({data}) => {
      dispatch({ type: FETCH_USERS, payload: data })
    })
  }
}

Answer 1

在then方法

中调用回调

export function fetchUsers(list, callback) {
    const apicall = (list) ? API_URL_ALLTIME : API_URL_TOP30
    const data = ''
    const request = axios.get(apicall)

    return (dispatch) => {
        request.then(({ data }) => {
            callback(data);
            dispatch({ type: FETCH_USERS, payload: data })
        })
    }
}

Answer 2

您可以直接从该函数返回您的承诺，而不是将回调作为第二个参数传递给您的函数。

 export function fetchUsers(list) {
  const apicall = (list) ? API_URL_ALLTIME : API_URL_TOP30
  const data = ''
  const request = axios.get(apicall)

  return (dispatch) => {
   return request.then(({data}) => {
    dispatch({ type: FETCH_USERS, payload: data })
   })
  }
}

这样就可以从组件中使用.then（），因为你的函数会返回一个promise。

*** Your component ***
fetchUsers(list).then(() => { 
 console.log('success')
})

使用redux-thunk时如何在ActionCreator中实例化回调？

2 个答案: