6.4.1 react-redux 패키지 없이 직접 구현하기

src/common/mockData.js

@@ -0,0 +1,25 @@
+const friends = [
+    {name: "lily", age: 1},
+    {name: "alan", age: 2},
+    {name: "david", age: 3},
+    {name: "now", age: 4},
+]
+
+const timelines = [
+    {desc: "a", likes: 0},
+    {desc: "hi everyone", likes: 10},
+    {desc: "nice to meet you", likes: 20},
+    {desc: "i love react", likes: 30},
+]
+
+function makeDataGenerator(items) {
+    let itemIndex = 0
+    return function getNextData() {
+        const item = items[itemIndex % items.length]
+        itemIndex += 1
+        return { ...item, id: itemIndex }
+    }
+}
+
+export const getNextFriend = makeDataGenerator(friends)
+export const getNextTimeline = makeDataGenerator(timelines)

src/common/store.js

@@ -0,0 +1,11 @@
+import { combineReducers, createStore } from "redux"
+import { friendReducer } from "../friend/state"
+import { timelineReducer } from "../timeline/state"
+
+const reducer = combineReducers({
+    timeline: timelineReducer,
+    friend: friendReducer
+})
+
+const store = createStore(reducer)
+export default store

src/friend/component/friendList.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function FriendList({ friends }) {
+    return (
+        <ul>
+            {friends.map(friend => (
+                <li key={friend.id}>{friend.name}</li>
+            ))}
+        </ul>
+    )
+}
+
+export default FriendList

src/friend/container/FriendMain.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useReducer } from "react";
+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(() => {
+        const unsubscribe = store.subscribe(() => forceUpdate())
+        return () => unsubscribe()
+    }, [])
+
+    function onAdd() {
+        const friend = getNextFriend()
+        store.dispatch(addFriend(friend))
+    }
+
+    console.log("FriendMain render")
+    const friends = store.getState().friend.friends
+    return (
+        <div>
+            <button onClick={onAdd}>친구 추가</button>
+            <FriendList friends={friends} />
+        </div>
+    )
+}

src/index.js

@@ -1,26 +1,12 @@
-import { combineReducers, createStore } from "redux";
-import { addFriend, editFriend, friendReducer, removeFriend } from "./friend/state";
-import { addTimeline, editTimeline, increaseNextPage, removeTimeline, timelineReducer } from "./timeline/state";
-
-const reducer = combineReducers({
-    timeline: timelineReducer,
-    friend: friendReducer
-})
-
-const store = createStore(reducer)
-
-store.subscribe(() => {
-    const state = store.getState()
-    console.log(state)
-})
-
-store.dispatch(addTimeline({ id: 1, desc: 'hello'}))
-store.dispatch(addTimeline({ id: 2, desc: 'bye'}))
-store.dispatch(increaseNextPage())
-store.dispatch(editTimeline({ id: 2, desc: 'bye'}))
-store.dispatch(removeTimeline({ id: 1, desc: 'so what?'}))
-
-store.dispatch(addFriend({ id: 1, name: 'lily'}))
-store.dispatch(addFriend({ id: 2, name: 'js'}))
-store.dispatch(editFriend({ id: 1, name: 'now'}))
-store.dispatch(removeFriend({ id: 2, name: 'js'}))
+import React from "react";
+import ReactDOM from "react-dom";
+import FriendMain from "./friend/container/FriendMain";
+import TimelineMain from "./timeline/container/TimelineMain";
+
+ReactDOM.render(
+    <div>
+        <FriendMain />
+        <TimelineMain />
+    </div>, 
+    document.getElementById("root")
+)

src/timeline/component/TimelineList.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+function TimelineList({ timelines }) {
+    return (
+        <ul>
+            {timelines.map(timeline => (
+                <li key={timeline.id}>{timeline.desc}</li>
+            ))}
+        </ul>
+    )
+}
+
+export default TimelineList

src/timeline/container/TimelineMain.js

@@ -0,0 +1,27 @@
+import React, { useEffect, useReducer } from "react";
+import { getNextTimeline } from "../../common/mockData";
+import store from "../../common/store";
+import TimelineList from "../component/TimelineList";
+import { addTimeline } from "../state";
+
+export default function TimelineMain() {
+    const [, forceUpdate] = useReducer(v => v+1, 0)
+    useEffect(() => {
+        const unsubscribe = store.subscribe(() => forceUpdate())
+        return () => unsubscribe()
+    }, [])
+
+    function onAdd() {
+        const timeline = getNextTimeline()
+        store.dispatch(addTimeline(timeline))
+    }
+
+    console.log("TimelineMain render")
+    const timelines = store.getState().timeline.timelines
+    return (
+        <div>
+            <button onClick={onAdd}>타임라인 추가</button>
+            <TimelineList timelines={timelines} />
+        </div>
+    )
+}