• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

immer 패키지 없이 createReducer함수 작성 문의

20.11.12 13:06 작성 23.01.22 08:35 수정 조회수 183

1

import { createStore } from "redux";
import { createReducer } from "./createReducer";
 
export default function Chapter0603() {
    return <div>실전 리액트</div>;
}
 
const INITIAL_STATE = { value: 0 };
const reducer = createReducer(INITIAL_STATE, {
    INCREMENT: state => (state.value += 1),
});
const store = createStore(reducer);
let prevState;

// store.dispatch 를 호출하여 액션을 발생시켰을 때
// 액션이 끝이나면 store.subscribe 함수가 호출이 된다.
store.subscribe(() => {
    const state = store.getState();
    if (state === prevState) {
        console.log('상탯값 같음');
    } else {
        console.log('상탯값 변경됨');
    }
    prevState = state;
});
 
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'OTHER_ACTION' });
store.dispatch({ type: 'INCREMENT' });
import produce from "immer";
 
export function createReducer(initialState, handlerMap) {
    return function (state = initialState, action) {
        return produce(state, draft => {
            const handler = handlerMap[action.type];
            if (handler) {
                handler(draft, action);
            }
        });
    };
};

createReducer에서 immer 패키지 사용해서 불변객체로 리턴해주도록 하잖아요.
immer 이용하지않는 createReducer를 만들려면 어떻게 해야할까요?
그럴려면 직접 불변객체를 만들어줘야하는데,  INCREMENT: state => state.value += 1 이 부분을
createReducer로 넘겨준 다음에 함수로써 실행하게 하는 부분을 만들지 못하겠네요.

답변 2

·

답변을 작성해보세요.

1

드로우님의 프로필

드로우

질문자

2020.11.13

아직 js를 전부 아는 것이 아니라 proxy 사용법을 몰라 차차 공부해가며 한번 구현해봐야겠네요.
제가 라이브러리 급 함수를 구현할 수 있을지 모르겠네요 ㅎㅎ
답변 감사드립니다. 알려주신 링크 참고해보겠습니다!

1

안녕하세요
immer 를 사용하지 않는다면 immer 가 하는 일을 똑같이 구현해야하는데요
아래와 같이 요약할 수 있을 것 같아요

1. 객체에서 수정된 속성이 뭔지 파악한다 (객체의 모든 후손 객체에 대해서도 파악 필요)
2. 수정된 속성의 부모 객체를 새로 만든다 (레퍼런스 변경)

이를 구현하는 한 가지 방법으로 proxy 를 이용하는 방법이 있습니다
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy