👔 Add: 맥주 리스트 API 추가 및 리덕스 세팅

babel-plugin-macros.config.js

@@ -0,0 +1,8 @@
+const isDev = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  styledComponents: {
+    fileName: isDev,
+    displayName: isDev,
+  },
+};

src/APIs/index.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export default {
+  getBeerList: () => {
+    return axios.get(`https://api.punkapi.com/v2/beers`);
+  },
+};

src/Components/Nav.js

@@ -18,7 +18,6 @@ const Nav = () => {
 
   return (
     <Header>
-      {/* <div className="logo" /> */}
       <Menu theme="dark" mode="horizontal" selectedKeys={currentPath}>
         {Object.entries(menuList).map(([menuName, path]) => (
           <Menu.Item

src/Hooks/useFetch.js

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+
+const useFetchData = callback => {
+  const [isFetched, setIsFetched] = useState(false);
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    callback()
+      .then(res => {
+        setData(res.data);
+        setIsFetched(true);
+      })
+      .catch(err => {
+        setError(err);
+      });
+  }, [callback]);
+
+  return [isFetched, data, error];
+};
+
+export default useFetchData;

src/Modules/beerList.js

@@ -0,0 +1,47 @@
+const initialState = {
+  loading: false,
+  data: null,
+  error: null,
+};
+
+export const GET_BEER_LIST_REQUEST = 'beerlist/GET_BEER_LIST_REQUEST';
+export const GET_BEER_LIST_SUCCESS = 'beerlist/GET_BEER_LIST_SUCCESS';
+export const GET_BEER_LIST_FAILED = 'beerlist/GET_BEER_LIST_FAILED';
+
+export const getBeerListRequest = () => ({
+  type: GET_BEER_LIST_REQUEST,
+});
+export const getBeerListSuccess = payload => ({
+  type: GET_BEER_LIST_SUCCESS,
+  payload,
+});
+export const getBeerListFailed = payload => ({
+  type: GET_BEER_LIST_FAILED,
+  payload,
+});
+
+const beerListReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case GET_BEER_LIST_REQUEST:
+      return {
+        ...state,
+        loading: true,
+      };
+    case GET_BEER_LIST_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        data: action.payload,
+      };
+    case GET_BEER_LIST_FAILED:
+      return {
+        ...state,
+        loading: false,
+        error: action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default beerListReducer;

src/Modules/index.js

@@ -4,15 +4,17 @@ import { all } from 'redux-saga/effects';
 // watcher saga -> actions -> worker saga
 // import loading from "./loading";
 import { enableES5 } from 'immer';
+import beerListReducer from './beerList';
+import getBeerListSaga from './saga/beerListSaga';
 
 enableES5();
 
-const rootReducer = combineReducers({});
+const rootReducer = combineReducers({ beerListReducer });
 
 // export default rootReducer;
 export default rootReducer;
 
 // wathcer saga
 export function* rootSaga() {
-  yield all([]);
+  yield all([getBeerListSaga()]);
 }

src/Modules/saga/beerListSaga.js

@@ -0,0 +1,21 @@
+import { call, put, takeLatest } from 'redux-saga/effects';
+import {
+  GET_BEER_LIST_REQUEST,
+  getBeerListSuccess,
+  getBeerListFailed,
+} from '../beerList';
+import APIs from '../../APIs';
+
+function* getBeerList() {
+  try {
+    const { data } = yield call(APIs.getBeerList); // yield call은 결과 반환시까지 기다려줌
+    yield put(getBeerListSuccess(data)); // action dispatch
+  } catch (err) {
+    yield put(getBeerListFailed(err));
+  }
+}
+export default function* getBeerListSaga() {
+  yield takeLatest(GET_BEER_LIST_REQUEST, getBeerList);
+  // yield takeLatest(...) : 가장 마지막 요청에 대해 어떤 함수를 실행시킬지 지정
+  // REQUEST_DATA 액션 객체가 들어오면 getApiData 실행
+}

src/Pages/Beers.js → src/Pages/BeerList.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 
-const Beers = () => {
+const BeerList = () => {
   return <h1>Beer List</h1>;
 };
 
-export default Beers;
+export default BeerList;

src/Pages/Home.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
 
 const Home = () => {
-  return <h1>Home</h1>;
+  const beerList = useSelector(s => s.beerListReducer.data);
+
+  return <h1>{`저장된 맥주 정보 ${beerList?.length || 0}개`}</h1>;
 };
 
 export default Home;

src/Routes.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import {
   BrowserRouter as Router,
   Route,
@@ -7,18 +8,25 @@ import {
 } from 'react-router-dom';
 import Nav from './Components/Nav';
 import Home from './Pages/Home';
-import Beers from './Pages/Beers';
-import Cart from './Pages/Cart';
+import BeerList from './Pages/BeerList';
+import CartList from './Pages/CartList';
+import { getBeerListRequest } from './Modules/beerList';
 
 const Routes = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getBeerListRequest());
+  }, [dispatch]);
+
   return (
     <Router>
       <Nav />
       <Switch>
         <Route exact path="/home" component={Home} />
         <Route exact path="/" render={() => <Redirect to="/home" />} />
-        <Route exact path="/beerlist" component={Beers} />
-        <Route exact path="/cart" component={Cart} />
+        <Route exact path="/beerlist" component={BeerList} />
+        <Route exact path="/cart" component={CartList} />
       </Switch>
     </Router>
   );