최근 나는 변이된 리듀서로 인한 버그에 직면한 상황에 처했습니다. 이것은 마침내 원인을 찾을 수 있을 때까지 나를 토끼 구멍으로 이끌었습니다.

"React에서 상태 변경은 안티 패턴입니다."

React를 사용하는 대부분의 사람들은 이것을 알고 마지못해 받아들입니다.

그러나 React/Redux 코드를 불변으로 만들지 않으면 심각한 결과가 있습니다.

토끼 굴 아래로의 여행

내가 작업하고 있던 코드베이스에 이상한 버그가 있었습니다. 내가 만들고 있던 구성 요소는 redux 상태 개체에 의존했습니다. 그러나 상태를 업데이트하기 위해 기존 리듀서를 호출하여 이 상태를 업데이트해도 개체가 다시 렌더링되지 않았습니다.

나는 그것의 바닥에 도달하려고 다음 시간 동안 내 머리카락을 뽑았습니다. 나는 그것이 내 구성 요소 내부와 관련이 있어야 한다는 이론을 깊이 파고 들었습니다.

하지만 오랜 시간이 지난 후, 나는 방향을 바꾸기로 결정했습니다. 글로벌 상태가 문제라면? Redux DevTools를 확인했고 상태가 명확하게 변경되었습니다. 그러나 다시 렌더링하지 않습니다.

나는 React 객체 검사가 변경 사항을 선택하지 않는다는 의심이 들기 시작했습니다. 하지만 상태가 변경된 경우 어떻게 그럴 수 있습니까? useEffect를 사용하여 작은 실험을 했습니다.

useEffect(() => {}, 
    console.log('Is this working?')
[myStateValue])

상태가 업데이트되고 흡연 총이 있을 때 이것은 실행되지 않았습니다.

이 상태를 업데이트하는 감속기를 확인했습니다. 그리고 저를 바라보고 있었는데, 기존 리듀서가 변이된 😱.

state.value = newValue
return {
    state
}

이것은 저지르기 쉬운 실수입니다

이 코드는 내가 코드베이스에서 작업한 시간보다 훨씬 오래 전입니다. 나는 모든 리듀서가 불변으로 설정되어야 한다고 잘못 가정했습니다.

하지만 이것은 쉽게 저지를 수 있는 실수라는 것을 깨달았습니다. 까다로운 점은 코드가 기술적으로 작동하지만 엄청난 주의 사항이 있다는 것입니다(제가 직면한 재렌더링 버그는 그 중 하나입니다).

사람들이 잊었거나 코드를 단순화하기 위해 리팩토링하는 동안일 수 있습니다. 값을 직접 설정하는 것은 많은 프로그래머에게 익숙한 것입니다. 기존 코드를 살펴본 후 공포스럽게도 더 많은 변형된 상태 코드가 있었습니다.

감속기 코드의 모습

return {
    ...state,
    value: newValue
}

코드에는 미묘한 차이가 있지만 React/Redux에서 이를 확인하는 방법에는 차이가 있습니다.

상태를 변경하면 안 되는 이유

첫째, Redux warns against mutating state . 많은 이유가 있습니다. 그러나 가장 중요한 것은 Redux가 shallow equality checking을 사용하고 깊은 동등성 검사를 사용하지 않는다는 것입니다.

둘째, React에서 객체 상태를 전혀 변경하지 않아야 합니다. React는 참조 확인을 사용합니다[.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). 즉, 개체 참조가 메모리에서 동일한지 여부를 확인하고 중첩된 값이 다른지 여부를 확인하지 않습니다. React Hooks는 이러한 일을 방지하는 데 정말 훌륭하지만 Redux 감속기를 사용하면 그 일은 당신에게 맡겨집니다.

// The problematic code above is like coding:
const [value, setValue] = useState('a')
state.value = 'b'

// instead of coding:
setValue('b')

내 문제의 경우 문제를 찾는 데 1시간이 걸렸지만 문제를 해결하는 데는 1분도 채 걸리지 않았습니다.

테이크아웃

절대 React 및 Redux 상태를 변경하지 마십시오!

코드를 변경하는 오래된 코드를 발견한 경우 신속하게 해결하기 위한 계획을 세우십시오. 그렇지 않으면 디버깅 악몽을 만들 수 있습니다.