在 redux 中获取 api 的最佳方法是什么？答案

【问题标题】：What is the best way to fetch api in redux?在 redux 中获取 api 的最佳方法是什么？
【发布时间】：2019-02-22 01:35:02
【问题描述】：

当我们在应用程序中使用 redux 时，如何编写在 react 应用程序中获取 api 资源的最佳方法。

我的动作文件是 actions.js

export const getData = (endpoint) => (dispatch, getState) => {
   return fetch('http://localhost:8000/api/getdata').then(
      response => response.json()).then(
        json =>
        dispatch({
       type: actionType.SAVE_ORDER,
       endpoint,
       response:json
    }))
}

这是获取 api 的最佳方式吗？

【问题讨论】：

这看起来不错
使用中间件更清洁 IMO

标签： javascript node.js reactjs api redux

【解决方案1】：

上面的代码很好。但是有几点你应该看看。

如果您想向用户显示加载程序以进行 API 调用，那么您可能需要进行一些更改。
您可以使用 async/await 语法更简洁。
此外，在 API 成功/失败时，您可能希望向用户显示一些通知。或者，您可以检查 componentWillReceiveProps 以显示通知，但缺点是它会检查每个道具更改。所以我大多避免它。

要解决这个问题，你可以这样做：

import { createAction } from 'redux-actions';

const getDataRequest = createAction('GET_DATA_REQUEST');
const getDataFailed = createAction('GET_DATA_FAILURE');
const getDataSuccess = createAction('GET_DATA_SUCCESS');

export function getData(endpoint) {
    return async (dispatch) => {
        dispatch(getDataRequest());
        const { error, response } = await fetch('http://localhost:8000/api/getdata');
        if (response) {
        dispatch(getDataSuccess(response.data));
        //This is required only if you want to do something at component level
        return true; 
        } else if (error) {
        dispatch(getDataFailure(error));
        //This is required only if you want to do something at component level
        return false;
        }
    };
}

在您的组件中：

this.props.getData(endpoint)
.then((apiStatus) => {
    if (!apiStatus) {
    // Show some notification or toast here
    }
});

你的减速器会是这样的：

case 'GET_DATA_REQUEST': {
    return {...state, status: 'fetching'}
}

case 'GET_DATA_SUCCESS': {
    return {...state, status: 'success'}
}

case 'GET_DATA_FAILURE': {
    return {...state, status: 'failure'}
}

【讨论】：

【解决方案2】：

使用中间件是在 React + Redux 应用程序中进行 API 调用的最可持续方式。如果你使用的是 Observables，也就是 Rxjs，那么看看redux-observable。

否则，您可以使用redux-thunk 或redux-saga。

如果您正在做一个快速原型，那么使用 fetch 从组件中进行一个简单的 API 调用就足够了。对于每个 API 调用，您将需要三个操作，例如：

LOAD_USER - 在 API 调用之前使用的操作设置加载状态。
LOAD_USER_SUCC - 当 API 调用成功时。从then 块发送。
LOAD_USER_FAIL - 当 API 调用失败并且您可能希望在 redux 存储中设置值时。从catch 区块调度。

例子：

function mounted() {
    store.dispatch(loadUsers());

    getUsers()
        .then((users) => store.dispatch(loadUsersSucc(users)))
        .catch((err) => store.dispatch(loadUsersFail(err));
}

【讨论】：