2016-02-15 9 views
5

Say mam usługę geolokalizacji, która nie jest świadoma Redux i skonfigurować go tak:Jak wysłać akcję z usługi nieświadomej Redux?

backgroundGeoLocation.configure(
    callback // will be called with an argument when the coordinates change 
); 

Co jest najczystszym sposobem na wysyłkę zwrotną usługa działanie Redux bez eksportowania store z oddzielnego modułu i używając store.dispatch() (ponieważ byłby to singleton)?

Odpowiedz

10

Jeśli chcesz przekazać pewną wartość do jakiegoś fragmentu kodu w JavaScript, musisz użyć funkcji.
Na przykład

function createGeoLocationService(store) { 
    let backgroundGeoLocation = new BackgroundGeoLocation() 
    backgroundGeoLocation.configure(coordinates => { 
    store.dispatch({ type: 'UPDATE_COORDINATES', coordinates }) 
    }) 
    return backgroundGeoLocation 
} 

Teraz, gdziekolwiek stworzyć sklep, tworzyć tę placówkę:

let store = createStore(reducer) 
let backgroundGeoLocation = createGeoLocationService(store) 

Jeśli chcesz uzyskać do niego dostęp w komponentach, możesz:

  1. Zrób to singleton (tak, nie to, co chciałeś, ale jest to ważna opcja dla aplikacji tylko dla klienta).
  2. Podaj to WN wyraźnie poprzez podpory (można dostać uciążliwe, ale jest to najbardziej prosty i wyraźny sposób)
  3. Pass it down pośrednio poprzez kontekst (bardzo łatwe, ale będziesz mieć do czynienia z unstable API that is subject to change więc jest to na sumieniu)
+0

Zauważ, że '' od 'react- redux' stosuje technikę "przekazuj w sposób niejawny przez kontekst", więc jeśli używasz Redux, już "radzisz sobie z niestabilnym API", nie wiedząc o tym. –

+0

@AnsonKao Nie musisz zmieniać aplikacji, gdy zmienia się niestabilny interfejs API. Ukrywamy jego użycie przed Tobą. –

1

If nie chcesz, aby callbackFn być świadomy store.dispatch musisz utworzyć coś w rodzaju strumienia zdarzeń lub Observable z callbackFn. A kiedy już to zrobisz, po prostu zamapuj strumień na funkcję store.dispatch.

Jesteś wolny, aby używać żadnych lib do tworzenia strumieni ale polecam Rx

W tym podejściu będziesz muszą pochodzić z czymś takim:

var geoLocation$ = new Rx.Subject(); 
var newCoordinatesAction = coordinates => ({ 
    type: "YOUR_TUPE", 
    payload: coordinates 
}); 
geoLocation$.map(newCoordinatesAction).map(store.dispatch); 
backgroundGeoLocation.configure(::geoLocation$.onNext); 
Powiązane problemy