I want access to the store (to the dispatch and observe) without the usage of React Components. I've been looking for a couple of hours, with no result.
This is the case. I've created the store in the App root:
import { Provider } from 'react-redux'
import createStore from './state/store';
let store = createStore();
ReactDOM.render(
<Provider store={store}>
<App>
</Provider>,
document.getElementById('root')
);
I'm happy using the connect function offered from react-redux when I need to add actions or listen to state changes in a ponent, but when I want to set some logics outside the ponent (mainly dispatch) i get stuck.
In short, I want to validate one field. I want to make a validation.js file where I can listen for changes from the store, run the validation logics, and then dispatch an action with the eventual error.
As far as the store, it is not global and I'm not using a React Component. Which is the way to get the store to listen for changes and to dispatch actions?
Thanks in advance.
I want access to the store (to the dispatch and observe) without the usage of React Components. I've been looking for a couple of hours, with no result.
This is the case. I've created the store in the App root:
import { Provider } from 'react-redux'
import createStore from './state/store';
let store = createStore();
ReactDOM.render(
<Provider store={store}>
<App>
</Provider>,
document.getElementById('root')
);
I'm happy using the connect function offered from react-redux when I need to add actions or listen to state changes in a ponent, but when I want to set some logics outside the ponent (mainly dispatch) i get stuck.
In short, I want to validate one field. I want to make a validation.js file where I can listen for changes from the store, run the validation logics, and then dispatch an action with the eventual error.
As far as the store, it is not global and I'm not using a React Component. Which is the way to get the store to listen for changes and to dispatch actions?
Thanks in advance.
Share Improve this question edited May 9, 2017 at 22:31 Don 4,20212 gold badges50 silver badges81 bronze badges asked Mar 16, 2016 at 11:20 Andrea ReginatoAndrea Reginato 1,3381 gold badge17 silver badges23 bronze badges2 Answers
Reset to default 6This is what I do (after creating my store):
export const dispatch = store.dispatch
Then you can call dispatch from anywhere in your code (although I pretty much just do it from event handlers).
If you use Redux-Saga to manage your flow-control, you only rarely need to use dispatch, aside from event handlers for direct user inputs, because it wraps dispatching in its put API.
I don't think you should be listening to changes directly from the store, but you would need it in order to dispatch actions.
Listening to changes
In redux the natural place for you to call this kind of logic would be from the action that dispatches the change in the field.
export function updateSomeField(value, field) {
fieldValidator.validate()
return { type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value }
}
fieldValidator can hold a reference to the store in order to get the state he needs in order to perform his logic with store.getState(), or get that data from the action as a parameter (with the help of async actions):
export function updateSomeField(value, field) {
return (dispatch, getState) => {
fieldValidator.validate(getState.myScreen.fields)
dispatch({ type: ActionTypes.UPDATE_SOME_FIELD, field: field, value: value })
}
}
Getting the store
As soon as you create it, you can just provide it to anyone who needs it. You can either do it by initializing a 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;
}
...
}
Or by injecting a member
let store = createStore();
fieldValidator.store = store;