Лучший подход для извлечения повторного кода с экранов с помощью хуков (setState, useEffect)?

Question

Вопрос может показаться немного расплывчатым, я новичок в использовании хуков, я буду достаточно конкретен в моем примере, у меня есть 3 переменные с их установщиком и useEffect, который работает на них.Код в основном запрашивает у пользователя разрешения на местоположение и сохраняет его положение.

Этот фрагмент кода повторно используется одинаково на двух разных экранах, мой вопрос в том, насколько возможно переместить все переменные кодаи установщики, и использовать эффект для третьего файла «помощник».

Вот фрагмент кода:

  const [localitzacioActual, setlocalitzacioActual] = useState(null);
  const [localitzacioPermisos, setlocalitzacioPermisos] = useState(null);
  const [mapRegion, setMapRegion] = useState(null);

  useEffect( () => {
    const demanarPermisos = async () => {
      let { status } = await Permissions.askAsync(Permissions.LOCATION);
      if (status !== 'granted') {
        setlocalitzacioPermisos('Permisos denegats')
      } else {
        setlocalitzacioPermisos(true)
      }
      let location = await Location.getCurrentPositionAsync({});
      setlocalitzacioActual(JSON.stringify(location))
      setMapRegion({ latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0022, longitudeDelta: 0.0121 });
    }
    demanarPermisos()
  }, []);

До какой степени я могу создать этот код в другом файле, у вас все ещенужно объявить константы и использовать эффект, но я могу переместить все логин для третьей функции за пределы файла?

Спасибо!

Answer 1

Вы можете поместить все свои переменные состояния и функцию в пользовательский хук.Ваш пользовательский хук будет обрабатывать изменения состояния для вас.

permisos.js

import { useState } from 'react';

const usePermisos= () => {
  const [localitzacioActual, setlocalitzacioActual] = useState(null);
  const [localitzacioPermisos, setlocalitzacioPermisos] = useState(null);
  const [mapRegion, setMapRegion] = useState(null);

  const demanarPermisos = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      setlocalitzacioPermisos('Permisos denegats')
    } else {
      setlocalitzacioPermisos(true)
    }
    let location = await Location.getCurrentPositionAsync({});
    setlocalitzacioActual(JSON.stringify(location))
    setMapRegion({ latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0022, longitudeDelta: 0.0121 });
  };

  return [
    localitzacioActual,
    localitzacioPermisos,
    mapRegion,
    demanarPermisos,
  ];
};

export default usePermisos;

Затем импортируйте их туда, где они вам нужны.Вы все еще должны использовать useEffect для запуска вашей функции.

screen1.js

import React, { useEffect } from 'react';
import usePermisos from './usePermisos';

const screen1 = () => {
  const [
    localitzacioActual,
    localitzacioPermisos,
    mapRegion,
    demanarPermisos,
  ] = usePermisos();

  useEffect(demanarPermisos, []);

  return (
    <div>React Functional Component</div>
  );
};

export default screen1;

Если вам нужны сеттеры за пределами demanarPermisos, вы можете вернуть их из usePermisos.

Answer 2

Ну, я отвечу на свой вопрос.Для всех, кто интересуется тем же:

Да, можно переместить весь код в третью функцию.Просто добавьте возврат со всеми необходимыми вам переменными на экране:

LocalitzacioHelper.js

import React, {useState, useEffect} from 'react';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

export const demanarLocalitzacio = () => {
  const [localitzacioActual, setlocalitzacioActual] = useState(null);
  const [localitzacioPermisos, setlocalitzacioPermisos] = useState(null);
  const [mapRegion, setMapRegion] = useState(null);

  useEffect( () => {
    const demanarPermisos = async () => {
      let { status } = await Permissions.askAsync(Permissions.LOCATION);
      if (status !== 'granted') {
        setlocalitzacioPermisos('Permisos denegats')
      } else {
        setlocalitzacioPermisos(true)
      }
      let location = await Location.getCurrentPositionAsync({});
      setlocalitzacioActual(JSON.stringify(location))
      setMapRegion({ latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0022, longitudeDelta: 0.0121 });
    }
    demanarPermisos()
  }, []);

  return [localitzacioActual, localitzacioPermisos, mapRegion]
}

Затем на экране вы просто вызываете функцию перед возвратом:

MapaScreen.js

const [localitzacioActual, localitzacioPermisos, mapRegion] = demanarLocalitzacio()

Эффект использования будет точно таким же, как и непосредственно внутри функции рендеринга экрана.