Запросы к Серверу в React

useContext

полученный объект из сервера нужно пользоваться везде в приложении
поэтому необходимо засунуть в Context и потом обращаться

dispathchData
src\context\Data\ReducerData.js
редьюсер который обрабатывает результат
(ожидает когда к нему кто то достучится)
служит чтобы поменять глобальное состояние т.е. Context

FETCH_NEWS
тип в редьюсере
заданное название dispathchData

src\routes\News\News.js

...
import ContextData from './../../context/Data/ContextData';
const News = ()=>{
const {stateData, dispatchData} = React.useContext(ContextData)

React.useEffect(()=>{
const fetchNews=async ()=>{
try{
const response = await fetch('http://127.0.0.1:3004/news')

if (response.status === 200){
const result = await response.json()
dispatchData({
type:"FETCH_NEWS",
payload:result
})
}

} catch (e){
console.log(e)
}
}
fetchNews()
},[])

src\context\Data\ReducerData.js

state не должен мутировать
проходимся оператором … и создаём клон state и потом вносим изменения (пробрасываем в news:action.payload)
в action.payload заходит result

const ReducerData=(state,action)=>{
switch(action.type){
case "FETCH_NEWS":
console.log(action)
return {
...state,
news: action.payload
}
default:return state;
}
}
export default ReducerData