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

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay