Registry / storage / react-redux-request

react-redux-request

library1.5.6jsnpmunverified

A declarative React component for data fetching that integrates seamlessly with Redux. Version 1.5.6 (stable, no recent updates) stores fetched data in the Redux store, acting as a cache. Unlike similar libraries, it uses render props and is BYOD (Bring Your Own Datafetcher), making no assumptions about how data is fetched. It reduces boilerplate by eliminating the need for manual action creators, reducers, and thunks/sagas. Requires React ^16.3 and react-redux ^5.

storage

npm install react-redux-request

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-REDUX-REQUES

react-redux-request

storagejavascriptv1.5.6

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Request

✓ import { Request } from 'react-redux-request'

✗ import Request from 'react-redux-request'

Default export is not available; must use named import.

reducer

✓ import { reducer } from 'react-redux-request'

✗ import { reducers } from 'react-redux-request'

The named export is 'reducer', not 'reducers'. Must be combined into your store.

Request and reducer

✓ const { Request, reducer } = require('react-redux-request')

CommonJS destructuring works; no default export.

Demonstrates basic setup: adding the reducer to the store and using the Request component with a fetch promise and a render prop showing status.

import { createStore, combineReducers } from 'redux'; import { Provider } from 'react-redux'; import { Request, reducer } from 'react-redux-request'; const store = createStore(combineReducers({ reactReduxRequest: reducer })); function getData() { return fetch('https://jsonplaceholder.typicode.com/posts/1').then(res => res.json()); } const App = () => ( <Provider store={store}> <Request fn={getData} id="post" render={({ status, data, error }) => <div>{status}</div>} /> </Provider> );

Debug

Known issues

gotchaThe 'fn' function must return a promise, otherwise the component will not work correctly.

fix

Ensure 'fn' returns a promise (e.g., using fetch or axios).

affects: all

gotchaThe 'id' prop must be unique for each data request, otherwise data will be overwritten in the Redux store.

fix

Use distinct strings for different data fetching endpoints.

affects: all

gotchaThe reducer must be added under the key 'reactReduxRequest' in the combined reducers, or else the component will not find the state.

fix

Use combineReducers({ reactReduxRequest: reducer, ...otherReducers }) or configure store with that key.

affects: all

gotchaThe 'args' prop, when changed, triggers a new fetch; if an array reference changes often, it may cause excessive fetches.

fix

Memoize the 'args' array or use primitive values to avoid unnecessary re-fetches.

affects: all

Errors

Common errors & fixes

Error: Could not find 'reactReduxRequest' in store. Make sure the reducer is added under the key 'reactReduxRequest'.

Reducer not added to store or added under a different key.

fix

Add the reducer: combineReducers({ reactReduxRequest: reducer })

TypeError: fn is not a function

The 'fn' prop is not provided or is not a function.

fix

Pass a function that returns a promise to the 'fn' prop.

Warning: Failed prop type: The prop `render` is marked as required in `Request`

The 'render' prop is missing.

fix

Provide a 'render' prop that returns a React element.

Upgrade

Version history

1.5.6latest on npm

Audit

Dependencies

reactrequiredRuntime peer dependency for React components

react-reduxrequiredRuntime peer dependency for Redux integration

Agent activity

22 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/sqren/react-redux-request ↗

packagereact-redux-request ↗

homepagehttps://github.com/sqren/react-redux-request#readme ↗