'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