How to reduce your redux boilerplate by up to 80% - reduxios

reduxios- Reduce your redux boilerplate by 80% in 4 simple steps

This library provides utility functions specifically for handling reducers and actions related to data fetching which helps to decrease redux data fetching code by about 80%

Installation

npm install reduxios
# or
yarn add reduxios

Example Usage in 4 simple steps

• Generate the helper with the basename for action types

import { reduxios } from "reduxios";

export const booksStoreFetcher = reduxios<Book[]>("FETCH_BOOKS");

• Create the Reducer, which will handle various Fetch states. It takes the initial data as an argument

export const booksReducer = booksStoreFetcher.createReducer([]);

• Makes the action hook for Fetching your data or calling the API.

import axios from "axios";

export const useFetchBooks = () => {
  return booksStoreFetcher.useResource({
    axiosInstance: axios, // This can also be an axios instance created
    method: "get",
    url: "/books"
  });
};

• Use the action hook and state in your component. No need to dispatch the action.

const BooksList: FC = () => {
  const fetchBooks = useFetchBooks();
  const { data, fetchState, axiosErrorResponse } = useSelector(
    (state: RootState) => state.books
  );

  useEffect(() => {
    fetchBooks();
  }, []);

  return (
    <div>
      <h1>My Book List</h1>
      <ul>
        {data.map(book => (
          <Book key={book.id} book={book} />
        ))}
      </ul>
    </div>
  );
};

That's it! No need to manually write out action creators, type declarations, reducers and data fetching attempt/success/failure/reset handling. You get everything out of the box!

Want More Detailed Explanation?

Check the Github Repository here