Как передать urlSwapi из state(redux) в fetch?

Чтобы передать значение urlSwapi из состояния state (с использованием библиотеки Redux) в функцию fetch, вам потребуется выполнить следующие шаги:

1. Создайте действие (action) в Redux, которое будет обновлять значение urlSwapi в состоянии Redux. Например, вы можете создать действие с именем "setUrlSwapi" и передать новое значение urlSwapi в качестве параметра этого действия. Код может выглядеть примерно так:

// actions.js
export const setUrlSwapi = (urlSwapi) => {
  return {
    type: 'SET_URL_SWAPI',
    payload: urlSwapi
  }
}

2. Создайте редуктор (reducer) в Redux, который будет обрабатывать действие "SET_URL_SWAPI" и обновлять состояние Redux с новым значением urlSwapi. Например, вы можете создать редуктор с именем "urlSwapiReducer", который будет принимать текущее состояние (state) и действие (action), и возвращать обновленное состояние, в котором значение urlSwapi будет обновлено. Код может выглядеть примерно так:

// reducers.js
const initialState = {
  urlSwapi: ''
}

const urlSwapiReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_URL_SWAPI':
      return {
        ...state,
        urlSwapi: action.payload
      }
    default:
      return state
  }
}

export default urlSwapiReducer

3. Создайте контейнер (container) компонент React, в котором будет осуществляться связь между Redux и компонентом, в котором используется функция fetch. В этом контейнере вы будете подписываться на изменения состояния Redux и передавать значение urlSwapi в компонент с помощью props. Код может выглядеть примерно так:

// ContainerComponent.js
import { connect } from 'react-redux'
import { setUrlSwapi } from './actions'

const ContainerComponent = ({ urlSwapi, setUrlSwapi }) => {
  // Ваш код компонента

  // Пример использования функции fetch с передачей значения urlSwapi из props
  const fetchData = async () => {
    try {
      const response = await fetch(urlSwapi)
      const data = await response.json()
      // Обработка полученных данных
    } catch (error) {
      console.log(error)
    }
  }

  // Ваш код компонента

  return (
    // JSX разметка компонента
  )
}

const mapStateToProps = (state) => {
  return {
    urlSwapi: state.urlSwapi
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setUrlSwapi: (urlSwapi) => dispatch(setUrlSwapi(urlSwapi))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent)

4. Подключите контейнерный компонент (ContainerComponent) к вашему компоненту, где вы используете функцию fetch. Это можно сделать с помощью функции connect из библиотеки react-redux. Теперь вы можете использовать значение urlSwapi из props и передать его в функцию fetch. Пример кода может выглядеть так:

// YourComponent.js
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import ContainerComponent from './ContainerComponent'

const YourComponent = ({ urlSwapi }) => {
  // Пример использования функции fetch с передачей значения urlSwapi
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(urlSwapi)
        const data = await response.json()
        // Обработка полученных данных
      } catch (error) {
        console.log(error)
      }
    }

    fetchData()
  }, [urlSwapi])

  return (
    // JSX разметка компонента
  )
}

const mapStateToProps = (state) => {
  return {
    urlSwapi: state.urlSwapi
  }
}

export default connect(mapStateToProps)(YourComponent)

Теперь, при обновлении значения urlSwapi в состоянии Redux, его новое значение будет автоматически передаваться в компонент YourComponent и использоваться в функции fetch.