Redukcja dostępu bez reakcji

Question

Chcę uzyskać dostęp do sklepu (do wysyłki i obserwacji) bez użycia React Components. Szukałem przez kilka godzin, bez rezultatu.

Tak jest w tym przypadku. I utworzeniu sklepu w katalogu aplikacji:

import { Provider } from 'react-redux' 
import createStore from './state/store'; 

let store = createStore(); 

ReactDOM.render( 
    <Provider store={store}> 
    <App> 
    </Provider>, 
    document.getElementById('root') 
); 

Cieszę użyciu funkcji connect oferowaną od react-redux kiedy muszę dodawać działania lub słuchać zmian stanu w składniku, ale kiedy chcę, aby ustawić niektóre logiki poza komponentem (głównie wysyłki) utknąłem.

Krótko mówiąc, chcę zweryfikować jedno pole. Chcę utworzyć plik validation.js, w którym można nasłuchiwać zmian ze sklepu, uruchamiać logi sprawdzania poprawności, a następnie wywoływać akcję z ewentualnym błędem.

Jeśli chodzi o sklep, nie jest on globalny i nie używam komponentu React. W jaki sposób skłonić sklep do śledzenia zmian i wysyłania działań?

Z góry dziękuję.

Answer 1

To co mam zrobić (po utworzeniu mój sklep):

export const dispatch = store.dispatch

Następnie możesz zadzwonić pod numer dispatch z dowolnego miejsca w kodzie (chociaż robię to po prostu z obsługi zdarzeń).

Jeśli używasz Redux-Saga zarządzać kontrolę przepływu, tylko rzadko trzeba użyć dispatch, oprócz obsługi zdarzeń wejść dla bezpośrednich użytkowników, ponieważ otacza wysyłki w put API.

Answer 2

Nie sądzę, że powinieneś słuchać zmian bezpośrednio ze sklepu, ale potrzebujesz go do wysyłania akcji.

Słuchanie zmian

W redux naturalnym miejscem, aby wywołać ten rodzaj logiki byłoby od action że wysyła dostawcy zmian w tej dziedzinie.

export function updateSomeField(value, field) { 
    fieldValidator.validate() 
    return { type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value } 
} 

fieldValidator może posiadać odniesienie do sklepu w celu uzyskania stanu, czego potrzebuje, aby wykonywać swoją logikę z store.getState(), lub uzyskać te dane od działania jako parametr (przy pomocy działań asynchroniczny) :

export function updateSomeField(value, field) { 
    return (dispatch, getState) => { 
     fieldValidator.validate(getState.myScreen.fields) 
     dispatch({ type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value }) 
    } 
} 

Pierwsze sklep

jak tylko go stworzyć, można po prostu dostarczyć go każdemu, kto jej potrzebuje. Można też zrobić to przez inicjowanie pojedyncza

let store = createStore(); 
FieldValidator.setInstance(new FieldValidator(store)); 

// FieldValidator.js 
class FieldValidator { 
    ... 
    static _instance = null; 

    static getInstance() { 
     return FieldValidator._instance; 
    } 

    static setInstance(fieldValidator) { 
     FieldValidator._instance = fieldValidator; 
    } 
    ... 
} 

Albo poprzez wstrzyknięcie człon

let store = createStore(); 
fieldValidator.store = store;