[Redux-Toolkit] mutation이 되지 않는 오류(ESLINT)

회원정보 수정, 회원가입 과정에서 닉네임 중복 체크를 해줘야 합니다.

이를 위해 react-redux-toolkit의 createSlice와 createAsyncThunk를 활용하여 axios 요청을 처리하고 이후 결과에 따라 state.isNicknameChecked의 state를 바꿔주려고 했습니다. 하지만, state가 바뀌지 않고 에러가 나는 상황이 발생했습니다.

 

[에러]

Assignment to property of function parameter 'state'라는 에러가 발생하였습니다.

 

[해결과정]

1. 구글링을 통해서 찾아보려 했지만, 마땅한 결과가 나오지 않아 console.log로 state가 잘 들어오는 지 먼저 체크를 해주었습니다. 일반적인 JS 객체가아닌 Proxy 객체가 출력이 됐습니다.

일반적으로, Redux Toolkit은 createSlice 내부적으로 immer를 사용해주기 때문에 기존 데이터를 Proxy 객체로 감싸준다고 합니다. 그래서 current 메서드를 사용해주면 Proxy 객체에서 plain한 JS 객체로 변환해서 출력해줘서 해당 기능을 사용해주었습니다.

 

2. 확인 결과, createSlice내의 initalState가 state 파라미터로 잘 들어오고 있는 것을 확인했고, Assignment to property of function parameter 'state' 에러는 여전히 발생했습니다. 추가적으로, 구글링을 한 결과 Redux Toolkit github의 issue에서 해답을 찾을 수 있었습니다.

 

https://github.com/reduxjs/redux-toolkit/issues/521 - github 이슈
https://redux-toolkit.js.org/usage/immer-reducers#linting-state-mutations - 이슈 해결 하여 변경된 React Toolkit 공식문서

 

3. 결과적으로, Eslint에서 해당 작동(state의 상태 변화)을 막는 것으로 확인했습니다. 해당 설정은 함수에서 파라미터로 주어진 값에 대한 변경을 막는 설정인데, 이는 eslint 설정 파일에서 아래처럼 추가해주면 문제가 해결됩니다.

rules: {
	"no-param-reassign": ["error", { "props": false }]
 }