在 redux 应用程序中，在哪里为实体生成唯一 ID？

Question

我想允许用户多次将同一个服务器项添加到页面（id：5）。为了在我们的应用程序中跟踪这些项目，我们需要为每个实例生成一个唯一的 ID。

我们的项目具有关系数据，因此出于性能原因，我们可能会在 redux 存储中标准化 API 响应。

type Item = { id: string; }
type Sku = { id: string; }

type AppStore = {
  items: { [id: string]: Items },
  skus: { [id: string]: Skus },
  itemSkus: { [id: string]: string[] },
}

使用此 API

export interface IAPIResponse<T> {
  data?: T;
  errors?: string[];
}

type IAPIItem = {
  id: string;
  skus: Array<{
    id: string;
  }>;
}

在典型的 redux-thunk action creator 中请求数据：

export const addItem = () => async (dispatch) => {
  dispatch(startedAddItem());
  try {
    const response = await get <IAPIResponse<IAPIItem>>('/get/item/5');
    dispatch(succeededAddItem(response));
  } catch (error) {
    console.error('Error', error);
    dispatch(failedAddItem(error));
  }
};

并用他们的相关数据填充我们的减速器：

// items reducer
case ItemAction.addSucceeded:
  const apiItem = getApiResource(action.payload);
  const apiErrors = getApiErrors(action.payload);

  if (apiErrors) // Handle errors in state

  if (apiItem) {
    const item = buildItem(apiItem);
    return {
      ...state,
      [item.id]: item,
    }
  }
  break;

// skus reducer
case ItemAction.addSucceeded:
  const apiItem = getApiResource(action.payload);
  const apiErrors = getApiErrors(action.payload);

  if (apiErrors) // Handle errors in state

  if (apiItem) {
    const skus = buildSkus(apiItem.skus);
    const indexedSkus = { ...skus.map(s => ({ [s.id]: s })) };
    return {
      ...state,
      ...indexedSkus,
    }
  }
  break;

// itemSkus reducer
case ItemAction.addSucceeded:
  const apiItem = getApiResource(action.payload);
  const apiErrors = getApiErrors(action.payload);

  if (apiErrors) // Handle errors in state

  if (apiItem) {
    const item = buildLineItem(apiItem);
    const skus = buildSkus(apiItem.skus);

    return {
      [item.id]: skus.map(s => s.id),
    }
  }
  break;

在这种模式下，我们无法可靠地为 Item 和 Skus 生成相同的唯一 ID，因为响应在多个 reducer 中进行解析。 Redux 建议我们必须在它到达 reducer 之前生成唯一 ID。

问题：我怎样才能适应这种模式来解析reducer之前的响应，同时保持读取嵌套api数据和解析reducer中的响应体错误的灵活性？

Answer 1

在对 Discord 进行进一步讨论后，OP 提供了以下关键信息：

这里真的只有一个数据流片段

• 当用户单击“添加轮胎”时，React 应用程序可以从数据库中请求轮胎 (/tire/add/5)
• 他们可以多次请求同一个轮胎
• 然后他们可以修改该轮胎的每个实例以具有独特的属性
• 点击“保存”会将汽车及其轮胎发送至/car/save

我的回答：

/tire/add API 端点每次发送响应时都可以生成一个 UUID。或者，在客户端：

const addTire = (sku, otherData) => {
  const response = await post(`/tire/add/${sku}`, otherData);
  response.data.id = uuid();
  dispatch(tireAdded(response.data));
}

或者，特别是如果您使用 RTK：

const tiresSlice = createSlice({
  name: "tires",
  initialState,
  reducers: {
    tireAdded: {
      reducer(state, action) {
        // whatever here
      },
      prepare(tireData) {
        return {
          payload: {...tireData, id: uiud()}
        }
      }
    }
  }
})

总体：

• 不要在减速器中随意做任何事情
• 这意味着在您调度之前生成任何随机的东西
• 在调度包含该数据的操作之前，您可以根据需要对 API 响应进行预处理、修改和修改