Redux: wo Interaktion mit dem DOM, die durch eine Aktion aber Änderungen außerhalb der React App ausgelöst wird

Question

Ich habe eine React/Redux-App, die sich um eine interaktive Liste von Elementen für einen Echtzeitverkauf (Auktionen) kümmert . Meine <div id='app'></div> kümmert sich nur um die Liste.

Das Problem ist, wenn und Artikel verkauft wird, muss ich es zu einer anderen Liste hinzufügen, die nicht in der React App ist. Da die Liste auf dem Server gerendert wird und die einzige erforderliche Interaktion darin besteht, diese verkauften Elemente hinzuzufügen.

Im Moment mache ich so etwas wie diese

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

Ich frage mich, ob dies der richtige Ort ist, es zu tun, oder soll ich es woanders platzieren?

Answer 1

Wenn Sie sich kein Szenario vorstellen, in dem es möglich ist, Artikel zu verkaufen, ohne "den Artikel einer anderen Liste hinzuzufügen", dann ist dies vollkommen akzeptabel. Wenn nicht, möchten Sie möglicherweise die decouple Handlung des Verkaufs eines Artikels von der Benachrichtigung des externen Dienstes.

In jedem Fall, da es sich um einen externen Dienst handelt, würde ich sagen, dass dies ein perfektes Beispiel für eine middleware layer ist. Hier ein Beispiel:

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

Und hier ist, wie diese Schicht in dem Laden gelten:

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