Question

我是反应应用的初学者。我需要在我的应用程序中处理异步调用。

对于实现异步调用是否有任何库？

如何使用库实现异步调用？

Answer 1

对于实现异步调用，您可以使用以下库与react-redux

redux-thunk
redux-promise
redux-saga

您可以使用库文档学习异步调用

Answer 2

如果您使用的是vanilla ReactJS并且您的应用程序不需要任何Flux或Redux来控制应用程序的状态，那么您可以使用内置componentWillMount方法的React生命周期方法fetch或像axios

这样的图书馆

如果您的应用需要Flux或Redux，那么我个人建议Redux超过Flux，您可以使用redux-thunk中间件。例如

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

function increment() {
  return {
    type: INCREMENT_COUNTER
  };
}

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

有关详情，请参阅http://redux.js.org/docs/advanced/AsyncActions.html

Answer 3

以下是有关如何使用异步操作的文档：http://redux.js.org/docs/advanced/AsyncActions.html

在配置商店时，您可以这样定义：

const store = createStore(
  rootReducer,
  applyMiddleware(
    thunkMiddleware
  )
)

你在这样的行动中使用它：

function fetchAction(data) {
  // Return a function, this function will be activated the the thunk middleware with dispatch as parameter
  return function (dispatch) {
    // Dispatch some action before fetch (like setting loading)
    dispatch(requestData(data));

    // return a promise of the fetch
    return fetch('yoururl')
      .then(response => response.json())
      .then(json =>
        // dispatch a new action when you get your data
        dispatch(receivedData(data,json))
      ).catch (e = > 
        // you can also dispatch an error
        dispatch(errorData(data,e));
      )

  }
}

如何在redux反应应用程序中处理异步调用

3 个答案: