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

当我们在应用程序中使用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的最佳方法吗？

上面的代码很好。但是您应该注意以下几点

如果您想向用户显示用于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'}
}

---

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

如果您想向用户显示用于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'}
}

---

使用中间件是在React+Redux应用程序中进行API调用的最可持续的方法。如果您使用的是Observables，aka，Rxjs，那么只需看一眼即可

否则，您可以使用或

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

LOAD\u USER-用于在API调用之前设置加载状态的操作

加载用户成功-当API调用成功时。从

开始调度，然后从
块开始调度

加载用户失败-当API调用失败时，您可能需要在redux存储中设置该值。从

catch

块发送

例如：

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

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

---

使用中间件是在React+Redux应用程序中进行API调用的最可持续的方法。如果您使用的是Observables，aka，Rxjs，那么只需看一眼即可

否则，您可以使用或

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

LOAD\u USER-用于在API调用之前设置加载状态的操作

加载用户成功-当API调用成功时。从

开始调度，然后从
块开始调度

加载用户失败-当API调用失败时，您可能需要在redux存储中设置该值。从

catch

块发送

例如：

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

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

---

这看起来不错使用中间件比IMO干净得多这看起来不错使用中间件比IMO干净得多