Fetch data

package.json

@@ -14,6 +14,7 @@
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.1",
     "styled-components": "^5.3.3",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,11 +1,22 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { fetchApiRockets } from './redux/rockets/rockets';
+import { fetchApiMissions } from './redux/missions/missions';
 // prettier-ignore
 import {
   Header, Missions, Rockets, Profile,
 } from './components';
 import './App.css';
 
 function App() {
+  const API_ROCKETS = 'https://api.spacexdata.com/v3/rockets';
+  const API_MISSIONS = 'https://api.spacexdata.com/v3/missions';
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchApiMissions(API_MISSIONS));
+    dispatch(fetchApiRockets(API_ROCKETS));
+  }, []);
   return (
     <div className="App">
       <Router className="App">

src/components/Missions.js

@@ -1,21 +1,25 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import {
-  incrementedMission,
-  decrementedMission,
+  selectMissions,
+  selectStatusMissions,
 } from '../redux/missions/missions';
 
 function Missions() {
-  const dispatch = useDispatch();
+  const missions = useSelector(selectMissions);
+  const status = useSelector(selectStatusMissions);
+
+  if (status === 'loading') return <h1>Loading...</h1>;
   return (
-    <div>
+    <div style={{ maxWidth: '60rem', margin: '0 auto' }}>
       Missions
-      <button type="button" onClick={() => dispatch(incrementedMission())}>
-        Click me!
-      </button>
-      <button type="button" onClick={() => dispatch(decrementedMission(2))}>
-        Click me!
-      </button>
+      {status === 'done'
+        && missions.map((mission) => (
+          <div key={mission.id}>
+            <h2>{mission.name}</h2>
+            <p>{mission.description}</p>
+          </div>
+        ))}
     </div>
   );
 }

src/components/Rockets.js

@@ -1,17 +1,26 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { incrementedRocket } from '../redux/rockets/rockets';
-import { selectCountMission } from '../redux/missions/missions';
+import { useSelector } from 'react-redux';
+import { selectRockets, selectStatusRocket } from '../redux/rockets/rockets';
 
 function Rockets() {
-  const dispatch = useDispatch();
-  const count = useSelector(selectCountMission);
+  const rockets = useSelector(selectRockets);
+  const status = useSelector(selectStatusRocket);
+
+  if (status === 'loading') return <h1>Loading...</h1>;
   return (
     <div>
-      Rocket
-      <button type="button" onClick={() => dispatch(incrementedRocket())}>
-        {`Click me! ${count}`}
-      </button>
+      <h1>Rockets</h1>
+      {status === 'done'
+        && rockets.map((rocket) => (
+          <div key={rocket.id}>
+            <p>{`${rocket.name} ${rocket.type}`}</p>
+            <img
+              src={rocket.flickrImg[0]}
+              alt="imagen"
+              style={{ height: '250px', with: '250px' }}
+            />
+          </div>
+        ))}
     </div>
   );
 }

src/redux/configureStore.js

@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
+import thunk from 'redux-thunk';
 import reducerRockets from './rockets/rockets';
 import reducerMissions from './missions/missions';
 
@@ -8,7 +9,7 @@ const store = configureStore({
     missions: reducerMissions,
     rockets: reducerRockets,
   },
-  middleware: [logger],
+  middleware: [thunk, logger],
 });
 
 export default store;

src/redux/missions/missions.js

@@ -1,9 +1,19 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 
 const initialState = {
   countMission: 0,
+  statusMissions: 'idle',
+  missions: [],
 };
 
+export const fetchApiMissions = createAsyncThunk(
+  'missions/fetchApiMissions',
+  async (url) => {
+    const response = await fetch(url).then((res) => res.json());
+    return response;
+  },
+);
+
 const missionsSlice = createSlice({
   name: 'missions',
   initialState,
@@ -17,9 +27,30 @@ const missionsSlice = createSlice({
       countMission: state.countMission - action.payload,
     }),
   },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchApiMissions.pending, (state) => ({
+        ...state,
+        statusMissions: 'loading',
+      }))
+      .addCase(fetchApiMissions.fulfilled, (state, action) => {
+        const arrayMissions = action.payload.map((mission) => ({
+          id: mission.mission_id,
+          name: mission.mission_name,
+          description: mission.description,
+        }));
+        return {
+          ...state,
+          statusMissions: 'done',
+          missions: arrayMissions,
+        };
+      });
+  },
 });
 
 export const { incrementedMission, decrementedMission } = missionsSlice.actions;
 export const selectCountMission = (state) => state.missions.countMission;
+export const selectMissions = (state) => state.missions.missions;
+export const selectStatusMissions = (state) => state.missions.statusMissions;
 
 export default missionsSlice.reducer;

src/redux/rockets/rockets.js

@@ -1,19 +1,53 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+
+const initialState = {
+  countRocket: 0,
+  statusRocket: 'idle',
+  rockets: [],
+};
+
+export const fetchApiRockets = createAsyncThunk(
+  'rockets/fetchApiRockets',
+  async (url) => {
+    const response = await fetch(url).then((res) => res.json());
+    return response;
+  },
+);
 
 const rocketsSlice = createSlice({
   name: 'rockets',
-  initialState: {
-    countRocket: 0,
-  },
+  initialState,
   reducers: {
     incrementedRocket: (state) => ({
       ...state,
       countRocket: state.countRocket + 1,
     }),
   },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchApiRockets.pending, (state) => ({
+        ...state,
+        statusRocket: 'loading',
+      }))
+      .addCase(fetchApiRockets.fulfilled, (state, action) => {
+        const arrayRockets = action.payload.map((rocket) => ({
+          id: rocket.id,
+          name: rocket.rocket_name,
+          type: rocket.rocket_type,
+          flickrImg: rocket.flickr_images,
+        }));
+        return {
+          ...state,
+          statusRocket: 'done',
+          rockets: arrayRockets,
+        };
+      });
+  },
 });
 
 export const { incrementedRocket } = rocketsSlice.actions;
 export const selectCountRocket = (state) => state.rockets.countRocket;
+export const selectRockets = (state) => state.rockets.rockets;
+export const selectStatusRocket = (state) => state.rockets.statusRocket;
 
 export default rocketsSlice.reducer;