DEV Community

Codebreather
Codebreather

Posted on • Edited on

3 1

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

Retry later

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more