Thunk Request Statuses
Purpose
If you are using createAsyncThunk
from @reduxjs/toolkit
, thunk-request-status
gives an ability to avoid a lot of isLoading statuses in your project and provide the simple API for subscribing on 3 statuses of your async action.
You can subscribe on the following states:
- isIdle state
- isPending state
- isRejected state
- isFulfilled state
Basic example
request-user.thunk.ts
const requestUserThunk = createAsyncThunk('request-user', async () => {
const response = await fetch('https://some-url.com');
return response.json();
})
Components usage:
Now if you are interested in some status of your action,it is simple to subscribe on that in the template.
import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { useIsLoading, useIsRejected, useIsFulfilled, useIsIdle } from "thunk-request-status";
import { requestUserThunk } from "@store/user/request-user.thunk.ts";
export const UserPage = () => {
const dispatch = useDispatch();
const isPending = useIsLoading(requestUserThunk);
const isFulfilled = useIsFulfilled(requestUserThunk);
const isRejected = useIsRejected(requestUserThunk);
const isIdle = useIsIdle(requestUserThunk);
useEffect(() => {
dispatch(requestUserThunk());
}, [])
useEffect(() => {
if(isFulfilled) {
alert('Fulfilled!');
}
if(isRejected) {
alert('Rejected!');
}
}, [isFulfilled, isRejected])
if(isPending) {
return <FullScreenLoader />
}
return (
/// ..
)
}
If you need reset status to default state you may use resetThunkStatus
action
import React, {useCallback, useEffect} from "react";
import {useDispatch} from "react-redux";
import {resetThunkStatus} from "thunk-request-status";
import {requestUserThunk} from "@store/user/request-user.thunk.ts";
export const UserPage = () => {
const dispatch = useDispatch();
const resetUserRequestStatus = useCallback(() => {
dispatch(resetThunkStatus(requestUserThunk));
}, [])
return (
/// ..
)
}
Installation
Open a Terminal in the project root and run:
yarn add thunk-request-status
or
npm i thunk-request-status
Setup
- Add
requestStatuses
reducer to your root reducer.
import { requestStatuses } from 'thunk-request-status';
export const rootReducer = combineReducers({
requestStatuses, // <- add here
// ...
})