[React] Redux, store, payload

Redux 라이브러리 사용 중

리듀서 함수(state 변경 함수)를 JSX에서 호출 시 name 속성을 변경하도록 코드를 작성하였는데

state가 객체 배열로 정의되어있으나 리듀서 함수에서 return 문자열을 반환하고 있어서 에러가 발생하였다.

이것을 해결하기 위해 배열의 특정 요소를 update하도록 코드를 수정하고,

어떤 요소를 수정하도록 할지 payload 프로퍼티를 사용하는법을 포스팅 하겠음.

 

먼저 JSX에서 state의 배열 요소중에 어떤것을 변경하도록 할지 인덱스를 store.js의 리듀서 함수 호출시에 넘겨주기 위해

dispatch(changeName(i))} 으로 넘겨주겠음.

 

JSX에서 dispatch()로 리듀서 함수를 호출할 때 넘겨주는 인자를 payload라고 관용적으로 부르고 작명한다.

 

그리고 store에서 해당 리듀서 함수를 수정해줄텐데

함수의 인자로 state, action을 받는다(자유로이 작명 가능하나 관용적으로 사용하는것을 쓰자)

그리고  index라는 변수를 선언해서 action.payload를 집어넣어주면 JSX에서 넘겨준 값을 사용할 수 있다.

const index = action.payload 해주면 JSX에서 호출시 넘겨준 값 사용 가능

 

리듀서 함수에서 return이 없는걸 확인할 수 있는데

그 이유는 Redux Toolkit의 createSlice() 함수가 Immer라는 라이브러리를 내부적으로 사용하기 때문이다.

Immer는 불변성 관리를 자동으로 처리하여 원본 state를 직접 변경해도 안전하게 새로운 상태로 처리해준다

(나중에 Immer에 대해 따로 다루어 포스팅 하자)

 

만약 Redux Toolkit이 아닌 일반 Redux 였다면 state를 직접 수정하면 안되고 새로운 객체를 반환하는 방식으로 작성해야함

이런식으로 작성해야할 것임

 

리덕스 툴킷을 사용해도 아래처럼 return으로 반환할 수 있다.

리덕스 툴킷에서도 return 가능

 

이렇게 return을 사용하면 현재 상태를 기반으로 새로운 배열을 만들어 반환한다.

하지만 Redux Toolkit은 Immer가 자동으로 상태 변경을 관리하므로

보통 직접 상태를 변경하는 방식(return 없이)으로 작성하는것이 일반적임.

return을 사용해도 되지만 Immer의 기능을 활용하면 불변성을 유지하면서도 간편하게 상태를 변경할 수 있다.

 

아무튼 위의 방식으로 코드를 작성하면 변경 버튼 클릭 시 변경버튼을 클릭한 요소가 잘 바뀔것임.

변경 완료