redux-epic-middleware
v1.0.7
Published
A Redux middleware for handling side effects based on dispatched actions.
Downloads
11
Maintainers
Readme
Redux Epic Middleware
A Redux middleware for handling side effects based on dispatched actions.
View redux-epic-middleware on npm
Overview
The Redux Epic Middleware allows you to define "epic functions" that react to dispatched actions and potentially carry out side effects. This provides an elegant way to manage asynchronous operations, logging, data fetching, and more based on the actions dispatched to the Redux store.
Execution order
Important: Epics run after the Redux reducer has executed, ensuring that the state within the epics is always up-to-date after all reducers have processed the action.
It's safe to dispatch additional store actions directly from your epics.
If you're using asynchronous functions as epics (e.g., for fetching data), you can use the await keyword and then dispatch further Redux actions after the async operations are completed.
Installation
npm install redux-epic-middleware
Usage
Define your epics:
const userEpics = {
FETCH_USER: async (state, payload, dispatch) => {
try {
const response = await fetch(`https://api.example.com/user/${payload.id}`);
const user = await response.json();
dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
} catch (error) {
dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
}
}
FETCH_USER_FAILURE: (state, payload) => {
// Send some analytics from event...
}
};
Add the middleware to your store:
import {createEpicMiddleware} from 'redux-epic-middleware';
const epicMiddleware = createEpicMiddleware(userEpics);
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));
Dispatch actions as you normally would. The corresponding epics will be triggered:
store.dispatch({ type: 'FETCH_USER', payload: { id: 123 } });