Alexandr N

axios или просто fetch, полученные данные записываете в хук/state и дальше к нему обращаетесь

import React, { useState,useEffect} from 'react';

export default function MyComponent() {
const [values, setValues] = useState([])


const axiosInstance = Axios.create({
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
        'accept': 'application/json',
    }
});

const apiFunc = async (link) =>{
let result = axioss.get(link);
return await(result)
}
    useEffect(() => {
    apiFunc('ЛИНК К API').then(res=>{
      setValues(res)
    })
    }, [])

   return (
       <div>
          {values.length > 0 && values.roles.map(item=>{
           return (
             <div key={item.id}>ID: {item.id}   CODE: {item.code}</div>
      )
})}
       </div>
)
}

Забыть про тяжёлый и громоздкий redux, взять mobx посмотреть видео на ютубе и пользоваться им. Все операции производить в сторе и выводить только результат в компоненте. Объём кода маааааксимально мал. компонент обернуть в observer, он с лёгкостью будет всё отслеживать

1. В сторе контролируешь какой язык выбран
2. В стор стягиваешь с бэка словарь с активным языком
3. В стор функцию принимающую тэг для перевода и возвращающую текст

примерно так:

activeLang = 'ru' // активный язык

dict = [
{tag: 'header-title', ru:'Зонтик', ua: 'Парасолька'}
] // пример словаря котрый мы получили с бэка и положили в стор

const getMyLocal = tag =>{
const item = dict.find((item) => item.tag === tag );
return item ? item[activeLang] : 'wrong tag';
}

<div>getMyLocal('header-title') </div>

Ну как то так если по быстрому