reactjs - qué - Redux: dónde ubicar la interacción con el DOM, que se desencadena por una acción pero cambia fuera de la aplicación React

react router

Question

Tengo una aplicación React / Redux que se ocupa de una lista interactiva de artículos para vender en tiempo real (subastas). Mi <div id=''app''></div> solo se ocupa de la lista.

El problema es cuando el artículo se vende, necesito agregarlo a otra lista, que no está dentro de la aplicación React. Dado que la lista se representa en el servidor, y la única interacción necesaria para ello es agregar los artículos vendidos.

En este momento estoy haciendo algo como esto

// 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));
    });
};

Me pregunto si ese es el lugar correcto para hacerlo o debería ubicarlo en otro lugar.

Answer 1

Si no imagina un escenario donde es posible vender artículos sin "agregar el artículo a otra lista", entonces esto es perfectamente aceptable. De lo contrario, puede desacoplar el acto de vender un artículo de notificar al servicio externo.

En cualquier caso, dado que estamos tratando con un servicio externo, diría que este es un ejemplo perfecto para una capa de middleware . Aquí hay un ejemplo:

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);
}

Y aquí está cómo aplicar esa capa en la tienda:

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