6.3.2 리듀서에서 공통 기능 분리하기

src/common/createItemsLogic.js

@@ -0,0 +1,29 @@
+import createReducer from "./createReducer"
+
+export default function createItemsLogic(name) {
+    const ADD = `${name}/ADD`
+    const REMOVE = `${name}/REMOVE`
+    const EDIT = `${name}/EDIT`
+
+    const add = item => ({type: ADD, item})
+    const remove = item => ({type: REMOVE, item})
+    const edit = item => ({type: EDIT, item})
+
+    const reducer = createReducer(
+        { [name]: []},
+        {
+            [ADD]: (state, action) => state[name].push(action.item),
+            [REMOVE]: (state, action) => {
+                const index = state[name].findIndex(item => item.id === action.item.id)
+                state[name].splice(index, 1)
+            },
+            [EDIT]: (state, action) => {
+            const index = state[name].findIndex(item => item.id === action.item.id)
+            if (index >= 0) {
+                state[name][index] = action.item
+            }
+        }}
+    )
+
+    return {add, remove, edit, reducer}
+}

src/common/mergeReducers.js

@@ -0,0 +1,13 @@
+export default function mergeReducers(reducers) {
+    return function(state, action) {
+        if (!state) {
+            return reducers.reduce((acc, r) => ({...acc, ...r(state, action)}), {})
+        } else {
+            let nextState = state
+            for (const r of reducers) {
+                nextState = r(nextState, action)
+            }
+            return nextState
+        }
+    }
+}

src/friend/state.js

@@ -1,27 +1,7 @@
-import createReducer from "../common/createReducer"
+import createItemsLogic from "../common/createItemsLogic"
 
-const ADD = 'friend/ADD'
-const REMOVE = 'friend/REMOVE'
-const EDIT = 'friend/EDIT'
-
-export const addFriend = friend => ({type: ADD, friend})
-export const removeFriend = friend => ({type: REMOVE, friend})
-export const editFriend = friend => ({type: EDIT, friend})
-
-const INITIAL_STSTE = {friends: []}
-export const friendReducer = createReducer(INITIAL_STSTE, {
-    [ADD]: (state, action) => state.friends.push(action.friend),
-    [REMOVE]: (state, action) => (
-        state.friends = state.friends.filter(
-            friend => friend.id !== action.friend.id
-        )
-    ),
-    [EDIT]: (state, action) => {
-        const idx = state.friends.findIndex(
-            friend => friend.id === action.friend.id
-        )
-        if(idx >= 0){
-            state.friends[idx] = action.friend
-        }
-    },
-})
+const {add, remove, edit, reducer} = createItemsLogic('friends')
+export const addFriend = add
+export const removeFriend = remove
+export const editFriend = edit
+export const friendReducer = reducer

src/timeline/state.js

@@ -1,30 +1,19 @@
+import createItemsLogic from "../common/createItemsLogic"
 import createReducer from "../common/createReducer"
+import mergeReducers from "../common/mergeReducers"
 
-const ADD = 'timeline/ADD'
-const REMOVE = 'timeline/REMOVE'
-const EDIT = 'timeline/EDIT'
 const INCREASE_NEXT_PAGE = 'timeline/INCREASE_NEXT_PAGE'
 
-export const addTimeline = timeline => ({type: ADD, timeline})
-export const removeTimeline = timeline => ({type: REMOVE, timeline})
-export const editTimeline = timeline => ({type: EDIT, timeline})
+const {add, remove, edit, reducer: timelinesReducer} = createItemsLogic('timelines')
+
+export const addTimeline = add
+export const removeTimeline = remove
+export const editTimeline = edit
 export const increaseNextPage = () => ({type: INCREASE_NEXT_PAGE})
 
-const INITIAL_STSTE = {timelines: [], nextPage: 0}
-export const timelineReducer = createReducer(INITIAL_STSTE, {
-    [ADD]: (state, action) => state.timelines.push(action.timeline),
-    [REMOVE]: (state, action) => (
-        state.timelines = state.timelines.filter(
-            timeline => timeline.id !== action.timeline.id
-        )
-    ),
-    [EDIT]: (state, action) => {
-        const idx = state.timelines.findIndex(
-            timeline => timeline.id === action.timeline.id
-        )
-        if(idx >= 0){
-            state.timelines[idx] = action.timeline
-        }
-    },
+const INITIAL_STSTE = {nextPage: 0}
+const reducer = createReducer(INITIAL_STSTE, {
     [INCREASE_NEXT_PAGE]: (state, ) => (state.nextPage += 1)
-})
+})
+const reducers = [reducer, timelinesReducer]
+export const timelineReducer = mergeReducers(reducers)