javascript - 编排多个 Action

Question

我不清楚如何在 Redux 中协调多个顺序操作。例如，我有一个应用程序在左侧有一个摘要面板，在右侧有一个 CRUD 面板。在用户 CRUD 之后，我希望应用自动更新摘要。我还希望能够相互独立地刷新摘要和 CRUD。换句话说，我不希望 CRUD 操作必须了解摘要或任何其他 future 的下游后续操作(反之亦然)。是否有最佳做法可以在不让我的 Action 创建者知道其他 Action 的情况下进行协调？

例如，这是用于清除实体集合(CRUD 操作)的 (thunk) 操作创建器。是的，现在它与 fetchSummary() 调度紧密耦合。

export function clearCollection(collection) {
    return function(dispatch) {
        dispatch(requestCollectionClear(collection));

        return doClearCollection(collection)
            .then(function(coll) { 
                dispatch(receiveCollectionCleared(coll))
            })
            .then(function() {
                dispatch(fetchSummary()); // <-- How do I chain actions without tight coupling?
            });
            // TODO: .catch()
    }
}

其中 requestCollectionClear() 启动异步操作，而 fetchSummary() 是工作流中后续步骤的操作创建者。将 fetchSummary() 与 clearCollection() 分开的最佳模式是什么，将它们解耦以便彼此独立使用？

Answer 1

如果我在评论中正确理解了你对我的问题的回答(你的 CRUD 操作更新了一些收集数据并且你的摘要显示了相同收集数据的某个版本)，我认为你可以通过考虑你的问题来避免你的问题应用不同。

您的状态应该类似于具有 collections 键的对象，并且您的 reducer 应该对该对象进行操作。所以 clearCollections 方法会将 collections 值设置为空数组，fetchCollections 方法会将 collections 值设置到来自服务器等的新数据数组。

然后，您的摘要将只订阅您的 store 并显示 collections 键的最新和最大值(value)。不再紧密耦合。

编辑:根据评论，我认为您基本上是在询问如何在您的服务器和客户端之间就您的数据进行协调。处理此问题的一种方法是在应用程序加载时从服务器获取您的集合数据，然后通过分派(dispatch)操作(并将您的数据传递给操作创建者)用此数据填充您的 Redux 存储:

// Fetch your data
$.ajax({
  url: '/collections',
  method: 'GET',
  success: function(response) {
    // Populate your Redux store by dispatching an action
    store.dispatch(setCollections(response));
  }
});

然后，当你想更新你的数据时，比如说添加一个集合，你会做这样的事情:

// Update the Redux store, which updates the UI.
store.dispatch(addCollection(someNewData));

然后更新服务器，并协调响应

$.ajax({
  url: '/collections',
  method: 'POST',
  data: {collection: someCollection},
  success: function(response) {
    // Should be a no-op b/c client has already
    // been updated.
    store.dispatch(setCollections(response))
  }
});

您的 action creators 和 reducer 看起来像这样:

// Action creators:
function setCollections(collections) {
  return {type: 'setCollections', collections: collections}
}

function addCollection(collection) {
  return {type: 'addCollection', collection: collection}
}

// Reducer
function reduceCollections(state = initialState, action) {
  if (action.type === 'setCollections') {
    return {collections: action.collections}

  } else if (action.type === 'addCollection') {
    return {
      collections: state.collections.concat([action.collection])
    }

  } else {
    return state
  }
}

如何处理这一切取决于您。我试图在上面保持简单来说明这一点，但如果您愿意，您可以将 thunk 用于异步调用和 switch 语句或 reducer 的对象映射。