在Redux Application中将生成的ID替换为服务器ID的最佳方法是什么？

Question

我正在使用React和Redux并尝试构建一个简单的示例应用程序。我想创建实体并将创建的实体发送到服务器，然后获取服务器响应并从创建的实体中的服务器设置正确的id。

目前，我在等待确定的Id时生成一个fakeId，当服务器响应时，用正确的id替换fakeId。

这是一个正在运行的例子，标有最相关的行：

http://jsbin.com/duyovo/edit?js,console,output#J:L91-101

这是正确的做法吗？还是有另一种方式？我正在构建这个应用程序来学习React和Redux，我想以正确的方式学习它。

Answer 1

jsbin有一个错误，没有一个工作示例，我在解析这个问题时遇到了麻烦（你可能想解决这个问题）。但是，如果服务器正在生成id，它似乎是一个好的策略。

我不喜欢你根据＆＃34;形状＆＃34;重新使用case ADD_GROUP的方式。回应。

也许为了解决问题，您可以使用redux-thunk将操作拆分为同步和异步兄弟。

警告：

这只是伪代码，可以让您了解使用Redux-thunk时最终产品的外观。它可能不是一个完全不同的策略，但它可能被认为是一种更简洁的方式。

因此，您可以有一个初始操作来呈现加载项目：

var addGroup = (name, fakeId) => ({
    type: ADD_GROUP,
    name,
    fakeId
})

然后从服务器更新双操作（一个同步，另一个异步）。

首先是同步的，一旦响应回来（最后）将被调用：

var updateGroupFromServer = (id, name, fakeId) => ({
    type: UPDATE_GROUP_FROM_SERVER,
    name,
    id,
    fakeId
})

其次，您附加到按钮的非同步版本：

export const updateGroupFromServerAsync = (name, fakeId) => {

    // Update state with something temp
    store.dispatch(addGroupLoading(name, fakeId));

    // Go get the id from server
    return dispatch => {
      return new Promise(
        (done, fail) => {
          action
            .request
            .json()
            .then(json => {
              mockServer.addGroup(json.name)).then( res => {
                dispatch(
                  /* Now its ready, it calls your async action*/
                  updateGroupFromServer({ id: res.id, name, fakeId}) 
                );
                done();
              }
            )
            }
        )
    };
};

然后您将行动调度更改为：

      <button onClick={() => {
          updateGroupFromServerAsync(
              this.inputGroup.value,
              Date.now()
          )}>
         Add group
      </button>

然后你需要添加reducers来相应地处理它们。 编辑：添加了更好的解决方案