Доступ к скидке без ответа

Question

Я хочу получить доступ к магазину (к отправке и наблюдать) без использования компонентов React. Я искал пару часов, без результата.

В этом случае. Я создал магазин в корневом каталоге приложения:

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

let store = createStore(); 

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

Я рад, используя функцию connect предложил от react-redux, когда мне нужно добавить действия или слушать изменения состояния в компоненте, но когда я хочу установить некоторые логики вне компонента (в основном отправка), я застрял.

Короче говоря, я хочу проверить одно поле. Я хочу создать файл validation.js, где я могу прослушивать изменения из магазина, запускать логики проверки и затем отправлять действие с возможной ошибкой.

Что касается магазина, это не глобально, и я не использую компонент React. Каков способ заставить магазин слушать изменения и отправлять действия?

Заранее спасибо.

Answer 1

Это то, что я делаю (после создания моего магазина):

export const dispatch = store.dispatch

Затем вы можете позвонить dispatch из любого места в своем коде (хотя я в значительной степени делаю это только от обработчиков событий).

Если вы используете Redux-Saga управлять управление потоком, вы редко нужно использовать dispatch, кроме обработчиков событий для прямого ввода пользователя, так как он оборачивает диспетчерская в put API.

Answer 2

Я не думаю, что вы должны слушать изменения непосредственно из магазина, но вам понадобится его для отправки действий.

Прослушивание изменений

В redux естественное место для вас, чтобы назвать такого рода логики бы от action, что отправляет изменения в поле.

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

fieldValidator может содержать ссылку на магазин, чтобы получить состояние ему необходимо для того, чтобы выполнить свою логику с store.getState() или получить эти данные от действия в качестве параметра (с помощью асинхронных действий) :

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

Получение магазина

Как только вы создаете его, вы можете просто обеспечить ее всем, кто нуждается в этом. Вы можете сделать это путем инициализации синглтона

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

Или путем введения члена

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