Reactjs Redux：在何处放置与DOM的交互，该交互由操作触发，但在React应用程序之外发生更改

我有一个React/Redux应用程序，负责实时销售（拍卖）项目的交互式列表。我的

只处理列表

问题是，当商品售出时，我需要将其添加到另一个列表中，该列表不在React应用程序中。因为列表是在服务器上呈现的，并且它唯一需要的交互是添加那些已售出的项目

现在我正在做这样的事情

// redux thunk action
export const sellItem = (item) => (dispatch) => {
  dispatch(requestSellItem(item)); // set loading state

  return fetch('api/sell_item/' + item.id)
    .then(response => response.json())
    .then(json => {
      // remove the item from the React list
      dispatch(sellItemSuccess(item.id));
      // append the item to the sold items list
      // this is the function that puts the sold item in the 
      // list outside of the React app
      appendSoldItem(item);
    })
    .catch(err => {
      // do fallback here
      dispatch(sellItemError(err));
    });
};

---

我想知道这是否是正确的地方，或者我应该把它放在其他地方吗？

如果你不设想一种不需要“将项目添加到另一个列表”就可以销售项目的场景，那么这是完全可以接受的。如果没有，您可能希望通过通知外部服务来取消销售商品的行为

在任何情况下，由于我们处理的是外部服务，我认为这是一个完美的例子。下面是一个例子：

import { ITEM_SOLD_SUCCESS } from ... // Import same action created by sellItemSuccess()

let itemSoldNotifier = store => next => action => {
  if (action.type === ITEM_SOLD_SUCCESS) {
    // Notify the external service that the item was sold
    appendSoldItem(action.item); // Assuming that the action contains the item sold itself
  }
  return next(action);
}

下面是如何在商店中应用该层：

let store = createStore(
  combineReducers(reducers),
  applyMiddleware(
    itemSoldNotifier
  )
)

---

redux传奇也是处理这个问题的好地方（但它实际上也是一个中间件）