Subscribe on dispatch after store changed

Hello.

I trying implement keypress form validation.

When user typed one symbol in input, I want to validate this value.

How can i do it?

store.on(SET_NAME, (state: any, name: string) => {
        const data: IState = state[SECTION];

        return {
            ...state,
            [SECTION]: {
                ...data,
                name
            }
        }
    })
store.on('@dispatch', (state, [event]) => {
    console.log(state);// This state show me moment BEFORE any changes created by event
})

store.on('@changed', () => {
// I can not know what event create state changes
})
 

[majo44]

@omcg33

The sage or redux-observables are able to achieve such requirement just because they modify the storage behavior, Redux has middlewares and enhancers to achieve that, but you have to do that in the place where you are creating the store, you can’t enhance the store behavior after it is created. It is declarative approach.

On the other hand Storeon doesn’t have middlewares and enhancers, by default you can’t modify the store behavior, but you can in imperative way enhance it just by the event handlers as I showed in the previous comment. The other good example of tjis difference is the storeon-observables vs redux-observables.

// Redux - declarative
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware, combineEpics } from 'redux-observables';
 
const epic = action$ => action$.pipe(....); 
const epicMiddleware = createEpicMiddleware();
 
// you can do this only on store creation !!!
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));
epicMiddleware.run(combineEpics(pingEpic));

vs

// Storeon - imperative
import { combineEpics, ofEvent, toEvent, createEpicModule } from 'storeon-observable';
// any of your storeon modules
export const someStoreonModule = (store) =>
    const epic = event$ => event$.pipe(....);
    // attaching the epics to store within the module, we are not expecting any 'middleware' on it
    createEpicModule(combineEpics(epic))(store);
}

// and in any point of time, even with lazy loading you can attach the module to store
// you do not have to attach modules to store on store creation point
someStoreonModule(store);

But if you want, there is no problem to enhance the Storeon store behavior during the store creation, like in Redux, example:

import { createStoreon } from 'storeon';
const createEnhancedStoreon = (modules) => {
    const store = createStoreon([]);
    const enhancedStore = {
        ...store,
        dispatch: (event, data) => {
            const preState = store.get();
            store.dispatch(event, data);
            const newState = store.get();
            if (preState !== newState && event !== '@after') {
                store.dispatch('@after', event);
            }
        }
    }
    modules.forEach(i => { if (i) i(enhancedStore) });
    store.dispatch('@init');
    return enhancedStore;
}

[omcg33]

Sorry. I have not a good idea too. It was one of my complaints about the whole Redux idea.

Look for redux-saga. They did it. Any action that you got by take() will return you actual state yield take(SET_NAME, () => { const state = yield select(); // state has changes of SET_NAME })