미라클 메모리

목차

Redux Ducks Patten

What is Redux Ducks Patten

기존에 EarthMarket 프로젝트를 진행하면서 Action Type(액션 타입), Action Creator(액션 생성 함수), Reducer(리듀서)를 모두 하나의 파일로 관리하지 않고 따로따로 역할을 분리해서 사용했다. 기존 어스마켓의 프로젝트 규모가 큰 편이었기에 파일별로 역할을 나누었었다. 하지만 Redux Ducks패턴은 기존에 리덕스 모듈들을 파일별로 나누어 작성하는 것이 아닌 하나의 파일에 두어서 함께 관리하는 것이다

// Constant

const MEMORY_INIT = "MEMORY_INIT";
const MEMORY_CREATE = "MEMORY_CREATE";
const MEMORY_REMOVE = "MEMORY_REMOVE";
const MEMORY_UPDATE = "MEMORY_UPDATE";

// Action

export const initalData = (data) => ({
...
});

export const onCreate = (date, content, emotion) => ({
...
});

export const onRemove = (targetId) => ({
...
});

export const onEdit = (targetId, date, content, emotion) => ({
...
});

// Reducer

const memoryReducer = (state = {}, action) => {
  let newState = [];
  switch (action.type) {
    case MEMORY_INIT: {
...
    }
    case MEMORY_CREATE: {
...
    }
    case MEMORY_REMOVE: {
...
    }
    case MEMORY_UPDATE: {
...
    }
    default:
      return state;
  }
...
  return newState;
};

export default memoryReducer;

Ducks 패턴 같은 경우에는 module이라는 폴더에서 Ducks 패턴으로 만들어진 파일을 관리한다. 그리고 store 로직을 index.js를 통해서 관리를 해주는데 나는 방식을 좀 다르게했다. 데이터가 실질적으로 관리가 되는 reducer함수는 store함수에서 관리되는게 좀 더 구분짓기 편하다고 여겨 index.js가 아닌 store.js파일을 만들어서 관리해주었다.

• Store.js

import { combineReducers } from "redux";
import { createStore } from "redux";
import memoryReducer from "./module/memoryReducer";
import { composeWithDevTools } from "redux-devtools-extension";

const reducer = combineReducers({
  memoryReducer,
});

const store = createStore(reducer, composeWithDevTools());

export default store;