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

실전 리액트 프로그래밍

해결된 질문

작성

230

수정됨

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로 넘겨준 다음에 함수로써 실행하게 하는 부분을 만들지 못하겠네요.

react redux

답변 2

드로우

질문자

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

이재승

지식공유자

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

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

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

인프런 커뮤니티 질문&답변

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