Доступ к redux без react

Я хочу получить доступ к магазину (к отправке и наблюдению) без использования компонентов 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. Как заставить магазин слушать изменения и отправлять действия?

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

8
javascript reactjs redux

2 ответов

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

export const dispatch = store.dispatch

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

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

5

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

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

на 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 })
    }
}

получение в магазине

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

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;
2