[feat] Connect Redux to App

@@ -6,12 +6,17 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@testing-library/user-event": "^12.8.3",
+    "antd": "^4.16.1",
     "axios": "^0.21.1",
     "axios": "^0.21.1",
     "http-proxy-middleware": "^2.0.0",
     "http-proxy-middleware": "^2.0.0",
     "react": "^17.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "redux-promise": "^0.6.0",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^1.1.2"
     "web-vitals": "^1.1.2"
   },
   },
   "scripts": {
   "scripts": {

+// Redux에 있는 Store에 Reducer들이 여러가지 있을 수 있다.
+// -> why? : Reducer 안에서 하는 일은
+// state가 어떻게 변하는지를 보여준 다음, 변한 마지막 값을 return 해주는 것.
+// 웹서비스를 제작하면서 user state, comment state ... 등등 다양한 기능에 대한 state들이 존재할 수 있고
+// 각각 state마다 reducer가 있어서 user reducer, comment reducer ... 등등 다양한 reducer들이 존재할 수 있음.
+// ------------------------------------
+// 이렇게 나눠진 다양한 reducer을 combineReducers을 통해 rootReducer에서 하나로 합쳐주는 기능을 만들 것임.
+import { combineReducers } from 'redux';
+// import user from './user_reducer';   // user(회원가입, 로그인, 인증, 로그아웃 기능이 있음) reducer
+// import comment from './comment_reducer'; // comment기능이 있을 때 reducer
+
+const rootReducer = combineReducers( {
+
+})
+
+// 다른 곳에서도 rootReducer을 쓸 수 있도록
+export default rootReducer;
\ No newline at end of file

@@ -3,15 +3,33 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import './index.css';
 import App from './App';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import reportWebVitals from './reportWebVitals';
+import { Provider } from 'react-redux'  // app에 redux를 연결시켜주기 위해 redux에서 제공하는 provider 사용
+import { createStore } from 'redux';  // redux에서 createStore 가져옴.
+import { applyMiddleware } from 'redux';  // object만 받는 store가 promise나 functions도 받기 위해 middleware을 사용함
+import promiseMiddleware from 'redux-promise';
+import ReduxThunk from 'redux-thunk';
+import Reducer from './_reducers/index'
+
+import 'antd/dist/antd.css';
+
+
+const createStoreWithMiddleware = applyMiddleware()
 
 
 ReactDOM.render(
 ReactDOM.render(
-  <React.StrictMode>
+  // App에 Redux를 연결
+  <Provider
+    store={createStoreWithMiddleware(Reducer,
+      // chrome REDUX_DEVTOOLS extension 사용하기 위해서
+      window.__REDUX_DEVTOOLS_EXTENSIONS__ && 
+      window.__REDUX_DEVTOOLS_EXTENSIONS__()
+      )}
+  >
+
     <App />
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </Provider>
 );
 );
 
 
 // If you want to start measuring performance in your app, pass a function
 // If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
+// to log resu lts (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
 reportWebVitals();