React Redux Store Layout：如何处理“添加项目”请求的“待处理”状态？

debugcn 发表于 Dev

本杰明·M

示例商店：

{
  todos: {
    byId: {
      "1": { id: "1", title: "foo" },
      "2": { id: "2", title: "bar" }
    },
    allIds: ["2", "1"]   // ordered by `title` property
  }
}

现在用户想要添加一个新的 Todo 条目：

dispatch({
  type: 'ADD_TODO_REQUEST',
  payload: { title: "baz" }
})

这会触发一些API请求：POST /todos。pending只要没有响应（success或error），请求的状态就是。这也意味着，我还没有id新创建的 Todo 条目。

现在我已经想将它添加到商店（并显示它）。但是我当然不能将它添加到byIdand 中allIds，因为它还没有id。

问题 1：我应该如何更改我的商店布局以使其成为可能？

响应到达后，有两种可能：

success: 更新 store 并设置id新 Todo Entry的属性。使用dispatch({type:'ADD_TODO_SUCCESS', payload: response.id}).
error：从商店中删除新的 Todo Entry。使用dispatch({type:'ADD_TODO_ERROR', payload: ???})

现在这两个动作的减速器必须以某种方式在商店中找到相应的元素。但它没有标识符。

问题 2：如果没有，我如何在商店中找到该商品id？

附加信息：

我正在使用 redux-saga 进行反应
应该可以同时ADD_TODO_REQUEST运行多个并发。尽管pending商店中必须有多个Todo 条目是可能的。（例如，如果网络连接很慢，并且用户只需输入“TITLE1”，并点击“添加”按钮，然后在“标题2”和“添加”，“TITLE3”和“添加”。）虽然它不是可以禁用AddTodo请求挂起时的组件。

您如何解决应用程序中的此类问题？

编辑：还有更多：

相同的功能应该可用于“更新”和“删除”Todo 条目：

当用户编辑 Todo Entry 然后点击“保存”按钮时，该项目也应该处于该pending状态，直到响应到达。如果出现错误，则必须将旧版本的数据放回存储中（无需从服务器请求）。
当用户单击“删除”时，该项目将立即消失。但是，如果服务器响应是错误的，则应将该项目放回列表中。

如果有错误响应，这两个操作都应该恢复以前的数据。

本杰明·M

我找到了一个简单的解决方案。但我确信还有其他可能性和更好的解决方案。

将 Todo 条目保存在 2 个单独的集合中：

{
  todos: {
    byId: {
      "1": { id: "1", title: "foo" },
      "2": { id: "2", title: "bar" }
    },
    allIds: ["2", "1"],
    pendingItems: [
      { title: "baz" },
      { title: "42" }
    ]
  }
}

现在我可以“通过引用”在商店中找到它们。

// handle 'ADD_TODO_REQUEST':
const newTodoEntry = { title: action.payload.title };
yield put({ type: 'ADD_TODO_PENDING', payload: newTodoEntry });
try {
  const response = yield api.addTodoEntry(newTodoEntry);
  yield put({ type: 'ADD_TODO_SUCCESS', payload: { id: response.id, ref: newTodoEntry } });
} catch(error) {
  yield put({ type: 'ADD_TODO_ERROR', payload: newTodoEntry });
}

减速器将如下所示：

case 'ADD_TODO_PENDING':
  return {
    ..state,
    pendingItems: // add action.payload to this array
  }

case 'ADD_TODO_SUCCESS':
  const newTodoEntry = { ...action.payload.ref, id: action.payload.id };
  return {
    ..state,
    byId: // add newTodoEntry
    allByIds: // add newTodoEntry.id
    pendingItems: // remove action.payload.ref from this array
  }

case 'ADD_TODO_ERROR':
  return {
    ..state,
    pendingItems: // remove action.payload.ref from this array
  }

有2个问题：