개요
- 현재 redux 를 이용하여 숫자, 문자열, 배열, 객체를 다뤄보는 연습을 하고 있다.
- 객체의 reducer 를 작성하는 과정에서 막혔던 부분이 있어 해당 내용을 정리하고자 한다.
reducer
import { UPDATE_CONTENT, UPDATE_TITLE, CLEAR_OBJECT } from './types';
const initialState = {
obj: {
title: '기본제목',
content: '기본본문',
},
};
const objectReducer = (
state = initialState,
action: { type: string; payload: { title: string; content: string } }
) => {
switch (action.type) {
case UPDATE_CONTENT:
return {
obj: {
...state.obj,
content: action.payload.content,
},
};
default:
return state;
}
};
export default objectReducer;
- 처음 작성 할 땐 위처럼 작성했는데, 작성 후 다시 생각해보니 위의 코드는 상태를 직접 변경하기 때문에 옳지 않은 방법인 것 같았다.
Object.assign()
- 그래서 찾은 방법은
Object.assign() 메소드를 사용하는 것이다.
Object.assign() 은 인자로 들어온 객체들의 값을 복사하고, 첫번째 인자의 객체에 병합시켜 변경시킨 뒤, 병합된 객체을 반환한다.
→ 즉, 첫번째 인자만 직접 변경되고, 그 이외는 복사된다.- 아래의 코드를 보자.
case UPDATE_CONTENT:
return Object.assign(state.obj, {
obj: {
...state.obj,
content: action.payload.content,
},
});
- 위의 코드는 상태의 값이 직접 변경되지 않아야 하지만, 첫번째 인수에 들어가게 되어 상태를 직접 변경시킨다.
case UPDATE_CONTENT:
return Object.assign({}, state.obj, {
obj: {
...state.obj,
content: action.payload.content,
},
});
- 위에서 말했다시피 병합된 객체를 반환하는데, 빈 객체를 만들어 복사된 상태의 값을 사용하므로, 상태를 직접적으로 수정하지 않고 갱신한다.
+
