React AppState with redux

[raboomar]

Description

Currently, I'm using AppState to know when the app as coming back to the active state and inside there I'm making an API call with redux see cold below.

useEffect(() => {
const subscription = AppState.addEventListener("change", (nextAppState) => {
if (
appState.current.match(/inactive|background/) &&
nextAppState === "active"
) {
getTimes();
dispatch(getLocation());
dispatch(getCity());
}
appState.current = nextAppState;
setAppStateVisible(appState.current);
});
return () => {
subscription.remove();
};
}, []);

It works fine on an iPhone but when I deploy it to an android the API calls keep getting called and never stop if I comment out the redux call and redeploy it to an android phone everything works fine and it doesn't keep refreshing.

Version

0.68.2

Output of npx react-native info

System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Pro
Memory: 105.06 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.0 - /usr/local/bin/node
Yarn: Not Found
npm: 8.5.5 - /usr/local/bin/npm
Watchman: 2022.05.16.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2021.1 AI-211.7628.21.2111.8309675
Xcode: 13.4.1/13F100 - /usr/bin/xcodebuild
Languages:
Java: 17.0.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.2 => 0.68.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

just have dispatch when trying to use APPstate on an android phone.

Snack, code example, screenshot, or link to a repository

  useEffect(() => {
    const subscription = AppState.addEventListener("change", (nextAppState) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === "active"
      ) {
        getTimes();
        dispatch(getLocation());
        dispatch(getCity());
      }

      appState.current = nextAppState;
      setAppStateVisible(appState.current);
    });

    return () => {
      subscription.remove();
    };
  }, []);

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import * as Location from "expo-location";

export const getCity = createAsyncThunk(
  "getCity",
  async (dispatch, getState) => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== "granted") {
      return status;
    }
    let userCity;
    let location = await Location.getCurrentPositionAsync({
      accuracy: Location.Accuracy.Low,
    });
    let city = await Location.reverseGeocodeAsync({
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
    }).then((res) => {
      res.forEach((element) => {
        userCity = element.city;
      });
    });
    return userCity;
  }
);

const citySlice = createSlice({
  name: "city",
  initialState: {
    city: null,
    status: null,
  },
  extraReducers: {
    [getCity.pending]: (state, action) => {
      state.status = "loading";
    },
    [getCity.fulfilled]: (state, action) => {
      (state.status = "success"), (state.city = action.payload);
    },
    [getCity.rejected]: (state, action) => {
      state.status = "failed";
    },
  },
});

export default citySlice.reducer;

import { configureStore } from "@reduxjs/toolkit";

import locationReducer from "../location";
import athanTimesReducer from "../athanAPI";
import cityReducer from "../userCity";
import athanReducer from "../athanNpm";
export const store = configureStore({
  reducer: {
    location: locationReducer,
    athanTimes: athanTimesReducer,
    city: cityReducer,
    athan: athanReducer,
  },
});
export default store;

[raboomar]

Hello?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[cortinico]

Closing as stale