react-redux-blaze

Simliest React hook fetcher for redux! 4x less code 😍

Why

Simple tool for fetching data with Redux. It's create react hook, reducer and actions all in one.

• All data keeps in redux global store
• Strictly typed
• Autogenerated reducer
• Handles loading and error states
• useData hook
• Built in data selector
• Prefetching data
• Refetching data if arguments changes

Installation

  npm i react-redux-blaze

or

  yarn add react-redux-blaze

Usage

Check out example:

import { createReduxFetcher, FetcherModel } from 'react-redux-blaze';
import { LibraryResponse } from './models';
import Axios from 'axios';

// describe your state using FetcherModel generic interface
interface State {
  searchPage: FetcherModel<LibraryResponse>
}

export const SearchFetcher = createReduxFetcher<LibraryResponse, State>({
    fetcher: (search) => Axios.get(`${API_URL}?q=${search}`),
    getState: (state) => state.searchPage.model,
    mutate: (res) => res?.data?.collection,
    prefix: 'SEARCH_PAGE',
});

export default SearchFetcher.reducer;

...

// Just add auto generated reducer to root reducer:
export const rootReducer = combineReducers({
  searchPage: SearchFetcher.reducer
})

Then, just use hook:

function SearchPage({ query }) {
    const { data, isLoading, error } = SearchFetcher.useData(query);

    return <CardGrid items={data?.items} isLoading={isLoading} />;
}

That's all! No extra line of code! No more boilerplate! 😎

API

createReduxFetcher returns object with properties:

• reducer - autogenerated ready to use reducer,
• actions - autogenerated actions for manual dispatching,
• useData(args) - React hook for using data,
• fetchData(args) - thunk action for manaul fetch,
• prefetch(args) - You can prefetch data (f.e. in hover menu item)

Shape of FetcherModel:

export interface FetcherModel<TModel> {
    data: TModel | null;
    isLoading: boolean;
    error: any;
}