react utils(hoc, hook, etc) for fetching by listening redux action types
npm install react-redux-fetch-by-actionsLightweight(1kb gzip) helpers (hook, hoc) for dispatching action types and handling loading inside your components.
Based on redux-promise-listener
and react-redux-promise-listener-hook
packages
1. redux-promise-listener
2. react-redux-promise-listener-hook
3. redux
4. react-redux
5. react
npm i react-redux-fetch-by-actions``$xslt
// 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 ;
return (
{data}
// mutation, fetch as a callback
);
};``