如何在 redux 中映射合并的规范化 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）。下次有机会的话想试试这个

如何在 redux 中映射合并的规范化 api 响应

How to map merged normalized api response in redux

reactjs

redux

normalizr

react-redux