How can I stop the dispatch request action?

Question

i'm using react-native with redux-saga

I am dispatching a FLFOOD_UP_REQUEST by using useEffect in the initial rendering on the FollowFood page.

However, if I go back to another page before it becomes FLFOOD_UP_SUCCESS, FLFOOD_UP_REQUEST does not stop and it becomes FLFOOD_UP_SUCCESS later, causing an error. If FLFOOD_UP_REQUEST is executed and moves to another page, then FLFOOD_UP_SUCCESS succeeds and the page screen is not shown.

Therefore, what I want to do is that even if FLFOOD_UP_REQUEST is executed due to useEffect, if I move another page before FLFOOD_UP_SUCCESS, FLFOOD_UP_REQUEST will stop and I hope that FLFOOD_UP_SUCCESS will not be executed.

this is my code

(FollowFood.js)

    const FollowFood = () => {
      useEffect(() => {
        dispatch({
          type: FLFOOD_UP_REQUEST,
        });
      }, []);

      return (
        <>
          <FlatList
            keyExtractor={(item) => String(item.id)}
            onEndReached={() => {
              EndReached();
            }}
            onEndReachedThreshold={2}
            refreshing={loading}
            renderItem={({item}) => (
              <ImageContainer>
                <CardFollow item={item} Follow={Follow} />
              </ImageContainer>
            )}
            ListEmptyComponent={<LoadingFood label={'no.'} />}
          />
        </>
      );
    };

    export default FollowFood;

(saga.js)

    function* flfoodPost(action) {
      try {
        const result = yield call(flfoodUpAPI, action.data);
        yield put({
          type: FLFOOD_UP_SUCCESS,
          data: result.data,
        });
      } catch (err) {
          yield put({
            type: FLFOOD_UP_FAILURE,
            error: err.response.data,
          });
        }
      }

Answer 1

What is the error that you get? You can't render something?

Answer 2

Need more info about if FLFOOD_UP_REQUEST is called from other screen, but based on info given here you can use a variable FLFOOD_COMPLETED_IN_PAGE and discard SUCCESS if that didn't complete from that page.

To check if completed in same page you can have other variables:

1. fflood_requested = false
2. fflood_request_over = false
3. fflood_request_status = true
4. FLFOOD_COMPLETED_IN_PAGE = false

In FollowFood.js now you can listen for these variable change if user changed screen states will not be in proper status.

Note: you can also have dipatch FFLOOD_REQUEST_DOWN to reset states, when you get back response.