Redux Middleware
Redux middleware provides a third-party extension point between dispatching an action,
and the moment it reaches the reducer. People use Redux middleware for logging, crash reporting,
talking to an asynchronous API, routing, and more.
Middleware allows for side effects to be run without blocking state updates.
We can run side effects (like API requests) in response to a specific action,
or in response to every action that is dispatched (like logging). There can be
numerous middleware that an action runs through before ending in a reducer.
How do I make Redux middleware?
To apply a middleware in redux, we would need to require the apply Middleware function from the redux library
import {createStore, applyMiddleware} from "redux".In order to check that our middleware is hooked up correctly,
we can start by adding a log to display a message when an action is dispatched.
Why do we need middleware?
Middleware helps developers build applications more efficiently.
It acts like the connective tissue between applications, data, and users.
For organizations with multi-cloud and containerized environments, middleware can
make it cost-effective to develop and run applications at scale.
The following is the syntax of a middleware −
({ getState, dispatch }) => next => action
The syntax of using applyMiddleware API is:
applyMiddleware(...middleware)
And this can be applied to store as follows:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));
Writing Custom Middleware:
The most common example of Redux Middleware is to add logging.
This allows you to log the previous state,action and the next state to the console
everytime an action is dispatched.
A
community package which does this is
redux-logger,however,
we are going to look into how simple it is to build your own version.
All we need to do is log the current state,the action being dispatched ,
then log the next state and return it(for the next middleware in the chain).
Middleware>logging.js>
const loggingMiddleware= (store)=> {
return (next) => {
return (action)=> {
console.group (action.type);
console.log ('Action:',action);
console.log ('Previous State:',store.getState());
const result = next(action);
console.log('Next State:'store.getState());
console.groupEnd(action.type);
return result;
};
};
};
export default loggingMiddleware;
store.js
import {createStore,applyMiddleware} from 'redux';
import root Reducer from './reducers/root.js';
import loggingMiddleware from './redux/middleware/logger.js';
export default createStore(
root reducer,
applyMiddleware (loggingMiddleware)
);
The syntax can be a little hard to grasp at times.A function which returns a function which returns a function!
Always return the next state
You can use the store provided to dispatch actions,but be aware that this will trigger your middleware again.
