Redux：与 DOM 交互的位置，由操作触发，但在 React 应用程序之外发生变化

Posted 2023-02-22

【中文标题】Redux：与 DOM 交互的位置，由操作触发，但在 React 应用程序之外发生变化

【英文标题】：Redux: where to place interaction with the DOM, that is triggered by an action but changes outside of the React app

【发布时间】：2016-10-26 09:16:39

【问题描述】：

我有一个 React/Redux 应用程序，它负责处理实时销售（拍卖）的交互式项目列表。我的<div id='app'></div> 只负责列表。

问题是何时出售商品，我需要将其添加到另一个列表中，该列表不在 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));
    );
;

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

【参考方案1】：

如果您没有设想可以在不“将商品添加到另一个列表”的情况下销售商品的场景，那么这是完全可以接受的。如果没有，您可能希望通过通知外部服务来decouple 出售物品的行为。

无论如何，由于我们正在处理外部服务，我想说这是middleware layer 的完美示例。这是一个例子：

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-saga 也是处理这个问题的好地方（但它实际上也是一个中间件）