외국분의 미니 리덕스를 보다보면 불변성을 안지켜도 작동이 잘된다
그러면 자연스레 의문이 든다
리액트,리덕스에서 그렇게 불변성을 강조하는데 뭐지,,?
그래서 리덕스를 까봐야겠다라는 생각이 분석을 하게 된 계기이다
아래 글은 내가 6시간동안 분석하다 못찾아서 오픈채팅방에 올린 질문이다
리덕스 코드를 분석하다 모르는 것이 있어 질문을 올립니다
제가 모르는 부분은
리덕스 코드내부 에서 불변성을 지켜줘야 하는 부분을 파악하고 싶었습니다
https://codesandbox.io/s/mini-rideogseu-rg0lmr?file=/src/index.js
위 코드는 어떤 외국분이 미니 리덕스 만드신 코드인데요
(리듀서를 제가 조금 고침 state를 참조타입으로 바꾸고 불변성을 안지키는 방법으로 리듀서를 수정함)
이렇게 만들어진 리듀서에서 불변성 안지켜도 작동이 잘되는데요
그래서 진짜 리덕스 코드를 보았어요
보니까 currentReducer에서 state 변경한것을 그대로 state로 사용하고
listener를 순차적으로 호출해서 바뀐 상태값을 getState()로 가져가도록 하고 있어요
그래서 리덕스만 보아서는 불변성을 지켜줘야 되는 이유를 잘 모르겠어요
리덕스의 사용의 규칙에
이전 상태를 절대 건드리지 않고 변화를 준 새로운 상태 객체를 만들어서 반환해야 한다.
이 규칙은 가상돔 사용하는 프레임워크 or 라이브러리 때문인건가요?
위 글은 오픈 채팅방에 질문을 올리기 위해 작성한 글이다
답변오면 리덕스에서 불변성을 지켜줘야하는 이유에 대한 고민을 적어보겟다
combineReducers를 찾아보라는 답변이 왓다
오픈소스 채팅방에 정말정말 감사한다
더불어 VScode에서 핫리로딩 디버깅하는 법도 배워왔다
내가 엉뚱한데서 찾아보고 있었는데 정답은 combineReducers의 combination에 있다
dispath 중점적으로 보면 될거라 생각했었다
왜냐면 reducer는 내가 만들고 combineReducers는
내가 만든 reducer를 하나의 스토어에서 관리하게 엮어주는 역할만 한다고 생각햇었다
왜냐면 이름이 combineReducers라서,,
이 부분이 나의 문제점이었다
for (var _i = 0; _i < finalReducerKeys.length; _i++) {
var _key = finalReducerKeys[_i];
var reducer = finalReducers[_key];
var previousStateForKey = state[_key];
var nextStateForKey = reducer(previousStateForKey, action);
if (typeof nextStateForKey === 'undefined') {
어쩌구 저쩌구 throw Error..
}
nextState[_key] = nextStateForKey;
hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
}
이 파트 분석 중
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
분석을 완료했다
장황해서 수정한다
정말 심플하다
const preState = state;
const nextState = reducer(state,action)
이러면 reducer에서 state를 직접다루게 되면
preState === nextState 될수 밖에 없다 원시타입이던 참조타입이던
리덕스에서 불변성을 지켜줘야하는 이유를 찾고자 6시간 아니 7시간반 걸린것 같다
혼자였으면 포기하고 못찾았을 수도 있다
오픈 채팅방의 도움을 상당히 받았다 감사하다 정말
https://github.com/reduxjs/react-redux/blob/master/src/utils/shallowEqual.ts#L9
이거는 나중에 분석
오픈채팅방에서 나에게 정말 좋은 답변을 주신분들이다
메모
다람쥐
억울한 잉여 큿
jsvelte
GJ
임트트트
이분은 답변 준적은 없지만 따뜻한 말씀을 해주셔서
질문할 용기를 주셧다 메모
제로초병(병아리) , 더블, 어리양
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
추가로 내가 분석에 불필요하게 많은 시간을 썻던 이유
- combineReducers라는 이름만으로 state 변경의 불변성 원칙과
관련 없는 내용일 가능성 일것이라 생각한 것 - VScode로 브라우저 디버깅 방법을 몰랐었음,, 이게 가장 큰 원인
