react-redux-help-kit
v2.1.5
Published
React + Redux utils to improve Development Experience.
Downloads
1,744
Maintainers
Readme
react-redux-help-kit
React + Redux utils to improve Development Experience.
Installation
npm install react-redux-help-kit
or
yarn add react-redux-help-kit
Usage
Async helpers
Set of hooks and rules to easily control loading, error and success state of async call.
Add asyncReducers
to your combineReducers function
import { combineReducers } from 'redux'
import { asyncReducers } from 'react-redux-help-kit'
const rootReducer = combineReducers({
...asyncReducers,
// your others reducers
})
That's it!
From now to have loading, error or success states of async actions you need to follow simple _REQUEST, _SUCCESS, _FAILURE rule while creating acions.
Example:
// actions.ts
export const FETCH_TODO_DATA_REQUEST = 'FETCH_TODO_DATA_REQUEST';
export const FETCH_TODO_DATA_SUCCESS = 'FETCH_TODO_DATA_SUCCESS';
export const FETCH_TODO_DATA_FAILURE = 'FETCH_TODO_DATA_FAILURE';
export const FETCH_USER_DATA_REQUEST = 'FETCH_USER_DATA_REQUEST';
export const FETCH_USER_DATA_SUCCESS = 'FETCH_USER_DATA_SUCCESS';
export const FETCH_USER_DATA_FAILURE = 'FETCH_USER_DATA_FAILURE';
// middleware.ts
import { fetchTodos } from 'api'
export export const fetchTodoMiddleware = store => next => async action => {
if(action.type === FETCH_TODO_DATA_REQUEST) {
try {
const data = await fetchTodos()
store.dispatch({ type: FETCH_TODO_DATA_SUCCESS, payload: data })
} catch (e) {
store.dispatch({ type: FETCH_TODO_DATA_FAILURE, payload: e })
}
}
next(action)
}
// TodoListComponent.tsx
import { useRequestLoading, useRequestError } from 'react-redux-help-kit';
import { FETCH_TODO_DATA_REQUEST, FETCH_USER_DATA_REQUEST } from './actions';
export const TodoListComponent = () => {
// loading status will be updated accordinly to success or failure of request
const { loading } = useRequestLoading(FETCH_TODO_DATA_REQUEST);
const { loading: userRequestLoading } = useRequestLoading(FETCH_USER_DATA_REQUEST);
// if error you can handle it
const { error, clearError } = useRequestError(FETCH_TODO_DATA_REQUEST);
const { error: userRequestError } = useRequestError(FETCH_USER_DATA_REQUEST);
useEffect(() => {
if(error) {
// notify user or do something with error
clearError()
}
}, [error])
useRequestError(FETCH_TODO_DATA_REQUEST, () => {
// this callback will be called if fetching todos was successful
});
return // JSX
}
To change error type you can re-assign it locally:
const { error } = useRequestError<ICustomError>( /* action */ );
Or globally:
// create src/@types/react-redux-help-kit/index.d.ts
import 'react-redux-help-kit';
import {Action} from 'react-redux-help-kit';
declare module 'react-redux-help-kit' {
export function useRequestError<T extends ICustomError>(
action: Action,
): {
error: T | null;
clearError: () => void;
};
}