middleware.md

Redux middleware

Redux-Middleware is a function that sits between the action creator and reducer in the Redux data flow process. Its purpose is to intercept and process actions before they are sent to the reducers. To use middleware, you must first define a middleware function that conforms to the Redux middleware API. The middleware function is then added to the middleware chain using the applyMiddleware function provided by the redux package. Here is an example of how to define and use middleware in an application:

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        NgReduxModule
    ]
})
export class StoreModule {
    constructor(ngRedux: NgRedux<IAppState>, devTools: DevToolsExtension) {
        let enhancer: Array<any> = [];
        
        // Define a middleware function
        const myMiddleware = store => next => action => {
            console.log('Dispatching action:', action);
            const result = next(action);
            console.log('New state:', store.getState());
            return result;
        };

        if (devTools.enhancer() && isDevMode())
            enhancer = [
                devTools.enhancer(),
                applyMiddleware(myMiddleware)
            ];
        
        ngRedux.configureStore(rootReducer, INITIAL_STATE, [], enhancer);
    }
}

In this example, the myMiddleware function is defined with three parameters: store, next, and action.

• store parameter provides access to the Redux store.
• next is a function that calls the next middleware in the chain (or the reducer, if it is the last middleware).
• action is the current action being dispatched.

The myMiddleware function logs the action to the console, calls the next middleware in the chain (or the reducer), logs the new state to the console, and returns the result. The middleware function is then applied to the Redux store using the applyMiddleware function provided by the redux package. This function takes one or more middleware functions as arguments and returns a store enhancer that applies the middleware to the store's dispatch function.

Note that middleware can also modify the action before it is sent to the reducer or dispatch additional actions. To modify the action, simply modify the action parameter before calling next(action). To dispatch additional actions, call store.dispatch within the middleware function.

Reducer middleware

Angular-redux2 Middleware is a function that sits between reducers in the Angular-redux2/store data flow process. Its purpose is to intercept and process actions reducers. To use middleware, you must first define a middleware function that conforms to the Angular-redux2/store middleware API. Here is an example of how to define and use middleware in an application:

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        NgReduxModule
    ]
})
export class StoreModule {
    constructor(ngRedux: NgRedux<IAppState>, devTools: DevToolsExtension) {
        const middleware1 = (state: any, action: any, next: any) => {
            console.log('old state: ', state);
            new_state = next(state, action);
            console.log('new state: ', new_state);

            return new_state;
        };

        const middleware2 = (state: any, action: any, next: any) => {
            // `state` is a state from middleware1
            console.log('Middleware 2');
            // change the state fron next reducer
            state = { ...state, name: 'xxx' };
            
            return next(state, action);
        };

        let enhancer: Array<any> = [];
        let middleware: Array<Middleware> = [
            middleware1,
            middleware2
        ];

        if (devTools.enhancer() && isDevMode())
            enhancer = [
                devTools.enhancer(),
            ];

        ngRedux.configureStore(rootReducer, INITIAL_STATE, middleware, enhancer);
    }
}

In this example, the Middleware function is defined with three parameters: store, next, and action.

• store store object from preview reducer.
• next is a function that calls the next reducer in the chain.
• action is the current action from preview reducer.

Note that middleware can also modify the action or state before it is sent to the next reducer. To modify the action or state, simply modify the action parameter before calling next(state, action). The root reducer is the last member of the middleware chain.