add fetch rockets

package.json

@@ -6,12 +6,16 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
+    "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.1",
+    "redux-thunks": "^1.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/index.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
 import './index.css';
 import App from './App';
+import elementStore from './redux/configureStore';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={elementStore}>
+      <App />
+    </Provider>
   </React.StrictMode>,
 );

src/redux/configureStore.js

@@ -0,0 +1,13 @@
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import logger from 'redux-logger';
+import thunk from 'redux-thunk';
+import rocketReducer, { fetchRocketsAPI } from './rockets/rockets';
+
+const reducer = combineReducers({
+  rocketReducer,
+});
+
+const elementStore = createStore(reducer, applyMiddleware(thunk, logger));
+elementStore.dispatch(fetchRocketsAPI());
+
+export default elementStore;

src/redux/rockets/rockets.js

@@ -0,0 +1,56 @@
+const ADD_RESERVATION = 'space-travelers/rockets/ADD_ROCKET_RESERVATION';
+const REMOVE_RESERVATION = 'space-travelers/rockets/REMOVE__ROCKET_RESERVATION';
+const GET_ROCKETS = 'space-travelers/rockets/GET_ROCKETS';
+const baseURL = 'https://api.spacexdata.com/v3/rockets';
+
+const initialState = [];
+
+export const addRocketReservation = (payload) => ({
+  type: ADD_RESERVATION,
+  payload,
+});
+
+export const removeRocketReservation = (payload) => ({
+  type: REMOVE_RESERVATION,
+  payload,
+});
+
+export const getRockets = (payload) => ({
+  type: GET_ROCKETS,
+  payload,
+});
+
+export const fetchRocketsAPI = () => async (dispatch) => {
+  await fetch(`${baseURL}`)
+    .then((response) => response.json())
+    .then((rocketList) => {
+      console.log('rocketList: ', rocketList);
+
+      const arrangedList = rocketList.map((rocket) => ({
+        id: rocket.rocket_id,
+        name: rocket.rocket_name,
+        type: rocket.rocket_type,
+        flickr_images: rocket.flickr_images,
+        reservation: false,
+      }));
+      if (arrangedList) {
+        dispatch(getRockets(arrangedList));
+      }
+    });
+};
+
+// reducer
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_RESERVATION:
+      return [...state, action.payload];
+    case REMOVE_RESERVATION:
+      return state.filter((book) => book.item_id !== action.payload);
+    case GET_ROCKETS:
+      return [...action.payload];
+    default:
+      return state;
+  }
+};
+
+export default reducer;