Как отобразить объединенный нормализованный ответ API в редуксе

Question

Недавно попал в нормализацию ответов API, так что это может быть более плоским. Мне удалось сгладить ответ API от этого

К этому:

 case FETCH_IMAGES_SUCCESS:
      console.log(action.images.entities)

Как можно это повторить?

Раньше я использовал this.props.images.map(), но теперь данные разделены.

Что мне нужно сделать, чтобы выполнить итерацию по массиву изображенийс соответствующими вложенными данными?

Reducer.js

import {
  UPLOAD_IMAGE_SUCCESS,
  POST_COMMENT_SUCCESS,
  DELETE_IMAGE_FAILURE,
  FETCH_IMAGES_SUCCESS,
  POST_COMMENT,
  POST_LIKE,
  POST_LIKE_SUCCESS,
  DISLIKE_POST_SUCCESS,
  DELETE_IMAGE_SUCCESS,
} from '../types';
import { REHYDRATE, PURGE, FLUSH }from 'redux-persist'
// We use seamless-immutable but thats for
const initialState = {
  images: [],
  likeCount: [],
  liked: false
};
export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_IMAGES_SUCCESS:
      console.log(action.images.entities)
      // return {
      //   ...state,
      //   images: action.images.entities.images,
      //   ...state.images
      // };

    default:
      return state;
  }
};

saga.js

import { normalize, schema } from "normalizr";
import {imageListSchema} from "../schemas";

export function* getImages() {
  try {
    const images = yield call(api.images.fetchImages);
    // debugger;
    // console.log(normalize(images, [imageSchema]));
    // console.log(images)
    const data = normalize(images, imageListSchema )
    yield put(fetchImagesSuccess(data));

  } catch (error) {
    yield put(fetchImageFailure(error.response));
  }
}

Answer 1

Вы можете использовать redux-orm для обработки таких нормализованных реляционных данных во внешнем интерфейсе.

Это включает в себя преобразование ваших внутренних таблиц в модели и затем установление отношений между ними через внешние ключи. Если вы работали с реляционной базой данных, она точно моделирует те же принципы, что и здесь.

import { Model, fk, many, attr } from 'redux-orm';

class Comment extends Model {//static or instances go here}
Comment.modelName = 'Comment';

// Declare your related fields.
Comment.fields = {
    id: attr(),
    name: attr(),
    userId: fk(//declare foreign key to User model here),
};

После того, как вы настроили все свои модели, вы можете затем запрашивать, обновлять, удалять через его API следующим образом:

Comment.create(response);
Comment.all();
Comment.withId(1).update({ data: 'Nice Book!' });
Comment.all().filter(comment => comment.userId === '123').first().delete();

PS: Я еще не использовал это в производстве (переключился на GraphQL). Хотел бы поэкспериментировать с этим, если я получу любую возможность в следующий раз