React + Redux + нормализатор обработки ошибок API-запросов

Question

Я реализовал абстрактный редуктор «сущностей» для каждого вызова API из моего приложения.Теперь я хотел бы использовать нормализатор, чтобы поддерживать данные API в нормализованной форме.До сих пор я сохранял свой ответ на запрос API, полученный из промежуточного программного обеспечения API с помощью действий API, в редукторе, например:

case action.type.includes(API_ERROR):
case action.type.includes(API_SUCCESS):
  return {
    ...state,
    [action.payload.label]: {
      error: action.isError,
      data: action.payload.data
    }
  };

, чтобы сохранить флаг ошибки , чтобы иметь возможность указывать (вКомпоненты), если запрос был выполнен успешно или нет.

Если я правильно понимаю нормализатор, то редуктор сущностей будет рассматриваться как «база данных».Я предполагаю, что наличие error или isError флаг в нормализованных данных не правильно, не так ли?

Я просто не могу решить, как будет выглядеть мой редукторкогда я использую нормализатор для нормализации данных и как я смогу отслеживать (в компонентах ...), если запрос будет выполнен успешно или нет после рефакторинга этого кода

Другое дело, что если мой запрос не выполняется, данные ответане будет содержать ID или любую другую идентификацию, которая сообщает, какой запрос не удался (в настоящее время я использую метку Entity, например, действие fetchMembers () в качестве индикатора для этого).Данные с ошибочными ответами содержат только статус и причину (почему).

У вас есть какие-либо предложения, пожалуйста?Могу ли я продолжать использовать только один абстрактный редуктор для этого или мне лучше создавать собственные редукторы для всех моих действий API?

ПОДРАЗДЕЛ:

И яУ меня также есть запросы, данные ответа которых не имеют значения в контексте компонентов, и только важная информация - это если запрос SUCCED или FAILED (такие запросы, как выход из системы, вход в систему, ...).Я предполагаю, что их ответы не должны быть назначены в магазин избыточности, чтобы предотвратить вздутие магазина.Что я могу сделать с такими запросами, пожалуйста?

Answer 1

Не помещайте флаги isError или isLoading в нормализованные данные, потому что normalizr предназначен для нормализации глубоко вложенных объектов.По сути, он берет глубоко вложенный объект javascript и выравнивает его, и таким образом вы можете избавиться от избыточных данных, что является его самым большим преимуществом.Мы использовали React + Redux-Sagas + нормализр.Надеюсь, что этот кусок кода поможет вам настроить редуктор

Редуктор

// @flow

import {
  FETCH_DETAILED_EXPERIENCE_DATA,
  FETCH_DETAILED_EXPERIENCE_DATA_SUCCESS,
  FETCH_DETAILED_EXPERIENCE_DATA_ERROR,
} from '../ActionTypes'
import Immutable from 'seamless-immutable'
import { createReducer } from '../CreateReducer'

const INITIAL_STATE = Immutable({
  experienceData: null,
  isFetching: false,
  error: null,
})

const reducers = {
  [FETCH_DETAILED_EXPERIENCE_DATA]: (state, action) => {
    return Immutable.merge(state, { experienceData: null, isFetching: true })
  },
  [FETCH_DETAILED_EXPERIENCE_DATA_SUCCESS]: (state, { data }) => {
    return Immutable.merge(state, { experienceData: data, isFetching: false, error: null })
  },
  [FETCH_DETAILED_EXPERIENCE_DATA_ERROR]: (state, { error }) => {
    return Immutable.merge(state, { error, isFetching: false })
  },
}

export const reducer = createReducer(INITIAL_STATE, reducers)

Sagas

import { FETCH_DETAILED_EXPERIENCE_DATA } from '../ActionTypes'
import { put, takeLatest, call } from 'redux-saga/effects'
import API from '../../Services/baseApi'
import * as ExperienceActions from './Actions'
import * as EntitiesActions from '../entities/Actions'

import parseExperienceDetailResponse from 'App/Schemas/APIResponse/ExperienceDetailResponse'

function* fetchExperienceDetails(action) {
  try {
    const response = yield call(API.get, 'URL')
    const { entities, result } = parseExperienceDetailResponse(response.data)
    yield put(EntitiesActions.updateEntities(entities))
    yield put(ExperienceActions.fetchDetailedExperienceSuccess(result))
  } catch (e) {
    yield put(ExperienceActions.fetchDetailedExperienceError(e.message))
  }
}

export default function* root() {
  yield [yield takeLatest(FETCH_DETAILED_EXPERIENCE_DATA, fetchExperienceDetails)]

Схема

// @flow

import { normalize, schema } from 'normalizr'

const experience = new schema.Entity(
  'experiences',
  {
    owner: user,
  },
  { idAttribute: 'Id' },
)


const response = new schema.Object({
  experience,
})

export default (input: any) => {
  const { entities, result } = normalize(input, response)

  return {
    entities,
    result: result,
  }
}

Надеюсь, это поможет, спасибо.