Каков наилучший способ получить API в редуксе?

Question

Как написать лучший способ для получения ресурса 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
    }))
}

это лучший способ получитьапи?

Answer 1

Использование промежуточного программного обеспечения - наиболее устойчивый способ выполнения вызовов API в приложениях React + Redux.Если вы используете Observables, то есть Rxjs, тогда смотрите не дальше, чем redux-observable .

В противном случае вы можете использовать redux-thunk или redux-saga .

Если вы делаете быстрый прототип, то достаточно выполнить простой вызов API из компонента с использованием fetch.Для каждого вызова API вам понадобятся три действия:

1. LOAD_USER - действие, используемое для установки состояния загрузки перед вызовом API.
2. LOAD_USER_SUCC - когда вызов API завершается успешно.Отправка из блока then.
3. LOAD_USER_FAIL - когда происходит сбой вызова API и может потребоваться установить значение в избыточном хранилище.Отправка из блока catch.

Пример:

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

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

Answer 2

С приведенным выше кодом все в порядке. Но есть несколько моментов, на которые следует обратить внимание.

1. Если вы хотите показать пользователю Loader для вызова API, вам могут потребоваться некоторые изменения.
2. Вы можете использовать async / await, синтаксис намного чище.
3. Также при успешном / неудачном выполнении 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'}
}