13-4. 덧글 창 상태 리덕스에서 관리하기

각 포스트에 붙은 덧글 창들의 상태를 관리하기 위해서, 리덕스에서 상태와 액션을 정의해주도록 하겠습니다.

src/redux/modules/posts.js

(...)

const TOGGLE_COMMENT = 'posts/TOGGLE_COMMENT'; // 덧글 창 열고 닫기
const CHANGE_COMMENT_INPUT = 'posts/CHANGE_COMMENT_INPUT'; // 덧글 인풋 수정
(...)

export const toggleComment = createAction(TOGGLE_COMMENT); // postId
export const changeCommentInput = createAction(CHANGE_COMMENT_INPUT); // { postId, value }

const initialState = Map({
    next: '',
    data: List(),
    nextData: List(),
    comments: Map({
        // 예제 상태:
        _postId: Map({
            visible: false,
            value: ''
        }) 
    })
});

export default handleActions({
    (...)
    [TOGGLE_COMMENT]: (state, action) => {
        // comments Map 에 해당 아이디가 존재하는지 확인
        const comment = state.getIn(['comments', action.payload]);
        if(comment) {
            // 존재한다면 visible 값을 현재의 반대값으로 수정
            return state.updateIn(['comments', action.payload], comment => comment.set('visible', !comment.get('visible')));
        }
        // 존재하지 않는 경우엔 comment 기본 상태를 정의해줌
        return state.setIn(['comments', action.payload], Map({
            visible: true,
            value: ''
        }));
    },

    [CHANGE_COMMENT_INPUT]: (state, action) => {
        // 주어진 postId 의 덧글 인풋 값을 수정
        const { postId, value } = action.payload;
        return state.setIn(['comments', postId, 'value'], value);
    }

}, initialState);

위 코드에서는, 각 postId 에 대하여 Map 을 만들어서 상태를 관리합니다. 덧글 창이 가장 처음 토글 되는 시점에서, 주어진 postId 의 상태가 정의됩니다. 그리고 그 다음에는 기존 상태의 visible 값을 반대로 바꾸거나, 인풋의 값이 변경됩니다.