Redux: dove posizionare l'interazione con il DOM, che viene attivato da un'azione ma cambia al di fuori dell'app React

Question

Ho un'app React/Redux che si occupa di un elenco interattivo di articoli per una vendita in tempo reale (aste) . Il mio <div id='app'></div> si occupa solo dell'elenco.

Il problema è quando e l'articolo è venduto, ho bisogno di aggiungerlo a un altro elenco, che non è all'interno dell'app React. Poiché l'elenco è visualizzato sul server e l'unica interazione necessaria è quella di aggiungere gli articoli venduti.

in questo momento sto facendo qualcosa di simile

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

Mi chiedo se questo è il posto giusto per farlo o dovrei metterlo da qualche altra parte?

Answer 1

Se non si immagina uno scenario in cui è possibile vendere articoli senza "aggiungere l'elemento a un altro elenco", questo è perfettamente accettabile. In caso contrario, è possibile che si desideri decouple l'atto di vendere un articolo dalla notifica del servizio esterno.

In ogni caso, poiché si tratta di un servizio esterno, direi che questo è un esempio perfetto per uno middleware layer. Ecco un esempio:

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

Ed ecco come applicare tale livello nel negozio:

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