'Better to Chain createAPI calls or use createAsyncThunk?
I'm developing a news feed app based on politicians with Redux Toolkit (RTK)
I'm a little confused as to if I should be using createAsyncThunk in a slice or createApi for everything and setting state in the screen or view.
I've tried a bunch of different ways and am just not understanding something. I either can't render a useQuery hook or I'm rending too many React hooks. soooo I'm kind of at a loss.
I basically need four calls to return data from Bing to render 4 news feeds one for President, one for Vice President, one for each Senator, etc...
the flow currently is this: user inputs address, address is set in state by setState in the component and passed through my useGetAllElectedsByAddressQuery, then I think I should set redux state with dispatch(addElectedsToState(electeds));, this is where I get lost. I get errors if I try to call createAPI query in my slice and I also get errors if I call more than one hook in the isSuccess statement below. should I just be chaining them on top of my component? or should I be just doing it all in the createAPI or createAsyncThunk?
thanks in advance!
update 3/16/22 11pm CST
I've been throwing optional chaining on all the returns and it's holding together.
const NewsScreen = () => {
const { address } = useSelector(state => state.address);
// const { address } = useSelector(state => state.address);
// const { electedsState } = useSelector(state => state.electeds);
const dispatch = useDispatch();
// dispatch(fetchElectedsByAddress());
useSelector Electeds?
const {
data: electeds,
error,
isLoading,
isError,
isSuccess,
endpoint,
} = useGetAllElectedsByAddressQuery(address);
dispatch(addElectedsToState(electeds));
if (isLoading) {
return (
<View style={styles.container}>
<View style={styles.loading}>
<ActivityIndicator size="large" color="#e5604e" />
</View>
</View>
);
}
if (isError) {
console.log(JSON.stringify(error) + 'error hit');
return <Text>{error.message}</Text>;
}
if (isSuccess) {
// const selectSomeItemA = endpoint.select('president');
console.log(endpoint);
const president = electeds.officials[0].name;
dispatch(fetchNewsByPresident(president));
// getNewsTry(president);
}
return (
<View style={styles.container}>```
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
