Блог

Идея состоит в том, чтобы сделать вызов GET со стороннего сайта API с помощью redux. Я хотел бы знать, что я делаю неправильно, так как у меня возникают следующие проблемы:

1. API вообще не вызывается.
2. При запуске я получаю сообщение об ошибке Uncaught TypeError: selector.map is not a function в строке 15 файла screen.jsx.

Кроме того, пожалуйста, обратите внимание, что я абсолютно новичок в redux и мне с ним абсолютно тяжело. Вот мой код:

экран.jsx

 import React from "react"; import { useSelector } from "react-redux"; import { getData } from "./actions"; import { useEffect } from "react";  const Screen = () =gt; {  const selector = useSelector(state =gt; state.get);   useEffect(() =gt; {  getData()  }, []);   return (  lt;divgt;  {selector.map((key, value) =gt; lt;ulgt;  lt;ligt;{selector[value].name}lt;/ligt;  lt;/ulgt;  )}  lt;/divgt;  ); };  

экспорт экрана по умолчанию;

Действия

 import { useDispatch } from "react-redux";  export const getData = () =gt; async() =gt; {  const dispatch = useDispatch();  await fetch('https://api.instantwebtools.net/v1/airlines', {  method : 'GET'  }).then(  res =gt; res.json()  ).then(  data =gt; dispatch({  type : "GET_DATA",  payload : data  })  ); };  

редуктор(GET_DATA)

 const initialState = {  airlines: [] };  const FetchData = (state = initialState, action) =gt; {  switch (action.type) {  case "GET_DATA":  return {  ...state,  airlines: action.payload  };  default:  return state;  } };  export default FetchData;  

reducer(index.js)

 import { combineReducers } from "redux"; import FetchData from "./fetchData";  const reducer = combineReducers({  get : FetchData });  export default reducer;  

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider } from "react-redux"; import { createStore } from "redux"; import reducer from './reducers';  const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ amp;amp; window.__REDUX_DEVTOOLS_EXTENSION__());  ReactDOM.render(  lt;Provider store={store}gt;  lt;App /gt;  lt;/Providergt;,  document.getElementById('root') ); reportWebVitals();  

Вот ответ, с которым я намерен работать:

 [  {  "id": 1,  "name": "Quatar Airways",  "country": "Quatar",  "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/9/9b/Qatar_Airways_Logo.svg/300px-Qatar_Airways_Logo.svg.png",  "slogan": "Going Places Together",  "head_quaters": "Qatar Airways Towers, Doha, Qatar",  "website": "www.qatarairways.com",  "established": "1994"  },  {  "id": 2,  "name": "Singapore Airlines",  "country": "Singapore",  "logo": "https://upload.wikimedia.org/wikipedia/en/thumb/6/6b/Singapore_Airlines_Logo_2.svg/250px-Singapore_Airlines_Logo_2.svg.png",  "slogan": "A Great Way to Fly",  "head_quaters": "Airline House, 25 Airline Road, Singapore 819829",  "website": "www.singaporeair.com",  "established": "1947"  } ]