Im trying to debounce a api action which is a dispatch call to reducer.The api call in the browser should debounce after a particular delay given as a single api , but its going as multiple api calls after the delay ,the code is as follows.
please refer the screenshot also
const apiCall = (args) => {
dispatch(getECByStatus({status: 'PENDING_APPROVAL', search: args}))
}
const debounce = (apiFunc, delay) => {
let inDebounce
return function () {
const context = this
const args = arguments
clearTimeout(inDebounce)
inDebounce = setTimeout(() => {
inDebounce = null
apiFunc.apply(context, args)
},delay);
}
}
const optimizedVersion = debounce(apiCall, 600)
const handleSearchChange = (value) => {
optimizedVersion(value)
}
the handleSearchChange is the onchange event fired from the input box on typing the input.getECByStatus is a redux action creator, which calls api with the search param,
export const getECByStatus = (params) => async (dispatch) => {
let editCheckType = params?.type ? `/${params.type}` : ''
let searchParams = params?.search ? `&search=${params.search}` : ''
try {
dispatch({
type: actionType.GET_EC_BY_STATUS_REQUEST,
payload: {
load: true,
},
})
let study_id = getItem('study_id')
const { data } = await DataService.get(
`/edit-checks${editCheckType}?status=${params.status}&study_id=${study_id}${searchParams}`
)
dispatch({
type: actionType.GET_EC_BY_STATUS_SUCCESS,
payload: {
load: false,
data: data.data,
}
},
})
} catch (error) {
console.error('Get EC by status error', error)
dispatch({
type: actionType.GET_EC_BY_STATUS_FAIL,
payload: {
load: false,
},
})
}
}
Thanks in advance!
This is due to the UI re-render after dispatch event get fired, since the input box is a controlled one , we have to pass the updated value to the input box component, so we can make pass a ref for not re-rendering the UI.
Related
I have managed to cancel my http request via axios and redux.
This is what I have so far. I have a modal, this modal is saving data to a database, once I click on the abort, i cancel the dispatch action (the axios call made to save data) in the useEffect. Let 's say now the user exit the modal and decide some other time to go back on the modal to save its data again, the cancel signal is still on the route. How do I clear up the abort controller ? is there a way to do a clean up ?
Here is my service file :
export const sync = (l, obj, pId, controller) => {
let a = { ...obj };
return axios.post(`/${l}/f/ff/Create`, {
signal: controller.signal
});
};
my action file
export const save =
(l, el, pId,controller ) => async (dispatch) => {
try {
dispatch({ type: SAVE_REQUEST });
await sync(l, el, pId, controller);
dispatch({
type: SAVE_SUCCESS,
payload: el,
});
} catch ( error) {
dispatch({ type: SAVE_FAIL, payload: error});
}
}
};
and my component
const { current: controller } = useRef(null);
const handleAbort = () => {
controller.current?.abort();
controller.current = null;
};
useEffect(() => {
controller.current = new AbortController();
dispatch(save(l,el,p.id,controller)
return () => {
handleAbort();
};
},[])
<div>
<Modal>
<progressbar/>
<button onclick={handleAbort()}>abort</button>
<button >exit</button>
</Modal>
</div>
query,
I'm making a bulletin board right now.
So, I put the values of title, content in the Form information into the react-query function onSuccess. In the value, console.log does not react.
export const useAddFAQPost = () => {
return useMutation(FaqPost)
}
export function FaqPost(data: FAQ) {
return axios.post<FAQ>('/add', data, {
})
}
const { mutate } = useAddFAQPost()
const onSubmit = useCallback((event: React.ChangeEvent<FormEvent>) => {
event.preventDefault();
return mutate({ title, type } as FAQ), {
onSuccess: async (data: string, context: string) => {
console.log(data);
console.log('why not?');
},
onError: async (data: string, context: string) => {
console.log(data);
}
};
}, [title, type])
return (
<>
<form onSubmit={onSubmit}>
<input type="text" name="title" value={title} ... />
<option value="faq">FAQ</option>
</form>
</>
)
If onSubmit succeeds or fails, the console.log in onSuccess, onError should be recorded, but it is not being recorded. Why are you doing this?
onSuccess, onError doesn't seem to respond.
I don't know why. Help
The accepted answer is incorrect. The onSuccess/onError handler is also available on the 'mutate' method (https://react-query.tanstack.com/reference/useMutation).
The catch here is that those additional callbacks won't run if your component unmounts before the mutation finishes. So, you have to make sure the component where you are doing the mutation does not unmount. In your case:
const {
mutate
} = useAddFAQPost()
const onSubmit = useCallback((event: React.ChangeEvent < FormEvent > ) => {
event.preventDefault();
return mutate({
title,
type
}
as FAQ), {
onSuccess: async(data: string, context: string) => {
console.log(data);
console.log('why not?');
},
onError: async(data: string, context: string) => {
console.log(data);
},
onSettled: () => {
// Some unmounting action.
// eg: if you have a form in a popup or modal,
// call your close modal method here.
// onSettled will trigger once the mutation is done either it
// succeeds or errors out.
}
};
}, [title, type])
You can also use mutateAsync, wait for the async to finish, and get the response if needed in a particular scenario.
The onSuccess / onError and so on method should be define in the useMutation hook creation and not when you call the mutate function as per documention.
https://react-query.tanstack.com/guides/mutations
You'll have to adapt to your need but the idea is:
export const useAddFAQPost = () => {
return useMutation(FaqPost, {
onSuccess: async (data: string, context: string) => {
console.log(data);
console.log('why not?');
},
onError: async (data: string, context: string) => {
console.log(data);
}
})
}
You could also pass it when you call useAddFAQPost()
I have a custom hook like so for getting data using useQuery. The hook works fine, no problem there.
const getData = async (url) => {
try{
return await axios(url)
} catch(error){
console.log(error.message)
}
}
export const useGetData = (url, onSuccess) => {
return useQuery('getData', () => getData(url), {onSuccess})
}
However, if I call this hook twice in my component it will only fetch data from the first call even with a different URL. (Ignore the comments typo, that's intentional)
The call in my component:
const { data: commentss, isLoading: commentsIsLoading } = useGetData(`/comments/${params.id}`)
const { data: forumPost, isLoading: forumPostIsLoading } = useGetData(`/forum_posts/${params.id}`)
When I console.log forumPost in this case, it is the array of comments and not the forum post even though I am passing in a different endpoint.
How can I use this hook twice to get different data? Is it possible? I know I can just call parallel queries but I would like to use my hook if possible.
Since useQuery caches based on the queryKey, use the URL in that name
const getData = async(url) => {
try {
return await axios(url)
} catch (error) {
console.log(error.message)
}
}
export const useGetData = (url, onSuccess) => {
return useQuery('getData' + url, () => getData(url), {
onSuccess
})
}
//........
const {
data: commentss,
isLoading: commentsIsLoading
} = useGetData(`/comments/${params.id}`)
const {
data: forumPost,
isLoading: forumPostIsLoading
} = useGetData(`/forum_posts/${params.id}`)
I have a function that sends data to the server and uses props and set.... It is the same throughout few components. It gets called when a certain event occurs.
How can I refactor it out of those components into a single place?
I was thinking about using hooks but because it gets triggered by an event I don't think using a hook is a good approach.
async function sendDataToServer(data) {
const url = new URL(buildUrl());
let timeout = setTimeout(() => setPostingState(SendingState.Sending), 250);
try {
const response = props.id
? await axios.put(url, data)
: await axios.post(url, data);
setPostingState(SendingState.Idle);
props.onSaved(props.id ? props.id : response.data, data);
}
catch (error) {
setPostingState(SendingState.Error);
}
clearTimeout(timeout);
}
function handleSubmit(e) { ... sendDataToServer(data); ... }
You can make a curried function:
// helpers.js
export const genSendDataToServerCallback = ({ setState, onSaved, id }) => async (
data
) => {
const url = new URL(buildUrl());
let timeout = setTimeout(() => setState(SendingState.Sending), 250);
try {
const response = await (props.id
? axios.put(url, data)
: axios.post(url, data));
setState(SendingState.Idle);
onSaved(id ? id : response.data, data);
} catch (error) {
setState(SendingState.Error);
}
clearTimeout(timeout);
};
// Usage in some component
import { genSendDataToServerCallback } from './helpers.js'
const sendDataToServer = genSendDataToServerCallback({setter:setPostingState, ...props});
function handleSubmit(e) { sendDataToServer(data); }
// Usage in other component with different setter
const sendDataToServer = genSendDataToServerCallback({setter:setState, ...props});
function handleSubmit(e) { sendDataToServer(data); }
so im new in redux and I need bit of help with my homework. I have a drop down with couple of choices and the choice that user select needs to be passed to state (already have this working and state is updating when user select something new) and then to action that can fetch data with '/stats/${userChoice}'. But i have no idea how to do this at all.
actions/index.js:
export const fetchAuthorsStats = () => async dispatch => {
const response = await myAPI.get(`/stats/${userChoice}`);
dispatch({ type: 'FETCH_AUTHORS_STATS', payload: response.data })
};
components/Dropdown.js:
onAuthorSelect = (e) => {
this.setState({selectAuthor: e.target.value})
};
.
.
.
const mapStateToProps = state => {
return {
authors: state.authors,
selectAuthor: state.selectAuthor,
authorsStats: state.authorsStats
}
};
export default connect(mapStateToProps, { fetchAuthors, selectAuthor, fetchAuthorsStats })(Dropdown)
under "selectAuthor" I have my state that I need to pass to this action API
You already map dispatch to fetchAuthorsStats thunk in your component so that means you can just use it in onAuthorSelect (or anywhere else you need - like on form submit) and pass it a parameter with the selectedAuthor.
// Added a userChoice param here:
export const fetchAuthorsStats = (userChoice) => async dispatch => {
const response = await myAPI.get(`/stats/${userChoice}`);
dispatch({ type: 'FETCH_AUTHORS_STATS', payload: response.data })
};
onAuthorSelect = (e) => {
this.setState({selectAuthor: e.target.value})
this.props.fetchAuthorsStats(e.target.value);
};
You can achieve this by calling the API directly with the event target value :
/// first you update your API call to receive the selected author
export const fetchAuthorsStats = (userChoice) => async dispatch => {
const response = await myAPI.get(`/stats/${userChoice}`);
dispatch({ type: 'FETCH_AUTHORS_STATS', payload: response.data })
};
//then you update your handler function
onAuthorSelect = (e) =>{
this.props.fetchAuthorsStats(e.target.value)
}
if you wish to still save it on the react state you can do the setState first and then the API call with (this.state.selectedAuthor) instead of (e.target.value)