Redux: gdzie umieścić interakcję z DOM, która jest uruchamiana przez akcję, ale zmienia się poza aplikacją React

Question

Mam aplikację React/Redux, która zajmuje się interaktywną listą przedmiotów do sprzedaży w czasie rzeczywistym (aukcje) . Moja <div id='app'></div> zajmuje się tylko listą.

Problem polega na tym, kiedy przedmiot jest sprzedawany, muszę go dodać do innej listy, której nie ma w aplikacji React. Ponieważ lista jest renderowana na serwerze, a jedyną interakcją potrzebną do tego jest dodanie sprzedawanych elementów.

Teraz robię coś takiego

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

Zastanawiam się, czy to jest właściwe miejsce do tego, czy powinienem umieścić je gdzieś indziej?

Answer 1

Jeśli nie masz scenariusza, w którym można sprzedawać przedmioty bez "dodawania pozycji do innej listy", jest to całkowicie dopuszczalne. Jeśli nie, możesz chcieć decouple sprzedać przedmiot z powiadomienia o usłudze zewnętrznej.

W każdym przypadku, ponieważ mamy do czynienia z usługą zewnętrzną, powiedziałbym, że jest to doskonały przykład dla middleware layer. Oto przykład:

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

A oto, jak zastosować tę warstwę w sklepie:

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