6.4.2 react-redux 패키지 사용하기

package.json

@@ -9,6 +9,7 @@
     "immer": "^9.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.5",
     "react-scripts": "4.0.3",
     "redux": "^4.1.1",
     "web-vitals": "^1.1.2"

src/friend/container/FriendMain.js

@@ -1,31 +1,20 @@
 import React, { useEffect, useReducer } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { getNextFriend } from "../../common/mockData";
 import store from "../../common/store";
 import FriendList from "../component/friendList";
 import { addFriend } from "../state";
 
 export default function FriendMain() {
-    const [, forceUpdate] = useReducer(v => v+1, 0)
-    useEffect(() => {
-        let prevFriends = store.getState().friend.friends
-        const unsubscribe = store.subscribe(() => {
-            // 책에서와 다르게 코딩한 부분
-            // prevFriends !== store.friends
-            if (prevFriends !== store.getState().friend.friends){
-                forceUpdate()
-            }
-            prevFriends = store.getState().friend.friends
-        })
-        return () => unsubscribe()
-    }, [])
+    const friends = useSelector(state => state.friend.friends)
+    const dispatch = useDispatch()
 
     function onAdd() {
         const friend = getNextFriend()
-        store.dispatch(addFriend(friend))
+        dispatch(addFriend(friend))
     }
 
     console.log("FriendMain render")
-    const friends = store.getState().friend.friends
     return (
         <div>
             <button onClick={onAdd}>친구 추가</button>

src/index.js

@@ -1,12 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import store from "./common/store";
 import FriendMain from "./friend/container/FriendMain";
 import TimelineMain from "./timeline/container/TimelineMain";
 
 ReactDOM.render(
-    <div>
-        <FriendMain />
-        <TimelineMain />
-    </div>, 
+    <Provider store={store}>
+        <div>
+            <FriendMain />
+            <TimelineMain />
+        </div>
+    </Provider>, 
     document.getElementById("root")
 )