// store.js import { createStore, applyMiddleware } from 'redux'; import createReduxPromiseListener from 'redux-promise-listener'; const reduxPromiseListener = createReduxPromiseListener(); const store = createStore( reducer, initialState, applyMiddleware(...otherMiddleware, reduxPromiseListener.middleware), ); export const promiseListener = reduxPromiseListener; // <---- ⚠️ IMPORTANT ⚠️ export default store; 

// fetchService.js import createFetch from 'react-redux-fetch-by-actions'; import { promiseListener } from 'store'; const { fetchDecorator, useFetch } = createFetch(promiseListener); export { fetchDecorator, useFetch }; 

// Component.jsx import React from 'react'; import Loader from 'components/Loader'; import { useDidUpdate } from 'some-hooks-lib'; import { useFetch } from 'fetchService'; const Component = ({ id }) => { const { data, loading, fetch } = useFetch({ start: 'start-action-type', resolve: 'resolve-action-type', payload: { id }, // payload to be passed in start action, merged with prevoius data state }); useDidUpdate(() => { fetch() }, [id]); // fetch on props update, optional if (loading) return <Loader />; return ( <div> {data} <button onClick={fetch}>repeat</button> // mutation, fetch as a callback </div> ); };