时间戳

首页 > 解决方案 > React Redux Store Layout：如何处理“添加项目”请求的“待处理”状态？

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

问题描述

示例商店：

{
  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：我应该如何改变商店的布局才能做到这一点？

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

  1. success: 更新 store 并设置id新 Todo Entry 的属性。使用dispatch({type:'ADD_TODO_SUCCESS', payload: response.id}).

  2. error：从商店中删除新的 Todo 条目。使用dispatch({type:'ADD_TODO_ERROR', payload: ???})

现在，这两个动作的 reducer 必须以某种方式在 store 中找到相应的元素。但它没有标识符。

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

附加信息：

您如何在您的应用程序中解决这些问题？

编辑：还有更多：

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

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

标签： reactjsasynchronousreduxreact-reduxredux-saga

解决方案

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

将 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个问题：

  1. reducer必须使用对象引用。不允许 reducer 从 的动作负载中创建自己的对象ADD_TODO_PENDING。

  2. Todo Entries 不能在商店中轻松分类，因为有两个不同的集合。

有2个解决方法：

  1. uuid使用仅在项目处于状态时才存在的客户端生成的 s pending。这样，客户可以轻松地跟踪所有内容。

2.

  • insertAtIndexa)为待处理的项目添加某种属性。然后 React 组件代码可以合并这两个集合，并以自定义顺序显示混合数据。

  • b) 只需将物品分开即可。例如，在服务器数据库中已经持久化的项目列表之上和之下的待处理项目列表。

推荐阅读