setValue 함수 질문 있습니다.

실전 리액트 프로그래밍

몇 가지 리덕스 사용 팁

작성

648

현재 whois 프로젝트 진행중인데요.

    function setKeyword(value) {
        if (value !== keyword) {
            dispatch(actions.setValue("keyword", value));
            dispatch(actions.fetchAutoComplete(value));
        }
    }

export const actions = {
    setValue: createSetValueAction(Types.SetValue),
    fetchAutoComplete: (keyword) => ({
        type: Types.FetchAutoComplete,
        keyword,
    }),
};

export function createSetValueAction(type) {
    return (key, value) => ({ type, key, value });
}

이 부분에서 actions.setValue 함수 부분이 이해가 안갑니다.ㅠㅠ createSetValueAction 함수에서 type만 받았는데 return 에서 key와 value를 어디에서 가져오는건가요?? setValue에서 들어간 값들이 인자로 들어가는거 같은데 이해가 안가네요ㅠㅠ

react redux

답변 1

이재승

지식공유자

안녕하세요
createSetValueAction는 함수를 반환하고 있는데요
그래서 아래처럼 생각하시면 이해가 쉬울 것 같습니다

export const actions = {
    setValue: (key, value) => ({ type: Types.SetValue, key, value }),
    ...
};

createSetValueAction를 호출하는 순간에 key, values는 값이 아니고 함수의 매개변수를 표현한 것이라고 이해하시면 될 것 같습니다

Teo

질문자

너무 감사합니다! 한번에 이해가 됐어요..!

한가지 더 질문드릴게 있는데,

const reducer = createReducer(INITIAL_STATE, {
    [Types.StValue]: setValueReducer,
});

export function createReducer(initialState, handlerMap) {
    return function (state = initialState, action) {
        const handler = handlerMap[action.type];
        if (handler) {
            if (action[NOT_IMMUTABLE]) {
                return handler(state, action);
            } else {
                return produce(state, (draft) => {
                    const handler = handlerMap[action.type];
                    handler(draft, action);
                });
            }
        } else {
            return state;
        }
    };
}

createReducer에서 넘어가는 handlerMap에는 [Types.SetValue] 가 들어가는게 맞나요?

예를 들어서 reducer에 [Types.SetTotal], [Types.SetValue] 두개가 있다고 한다면

HandlerMap으로 두개가 들어가고, action.type의 핸들러를 찾아서 반환..까지 맞을까요?

return hanlder(draft, action) 이 부분은 setValueReducer(draft, action) 이라고

봐도 되는건가요?

이재승

지식공유자

네 말씀하신 내용 모두 맞습니다

action.type의 핸들러를 찾아서 반환

다만 위에 말씀하신 내용은 엄밀하게 얘기하면 `action.type의 핸들러를 찾아서 실행 후 반환`이라고 이해하시면 될 것 같아요

인프런 커뮤니티 질문&답변

setValue 함수 질문 있습니다.