24.2.2 리덕스로 폼 상태 관리하기

    이번에는 리덕스로 회원가입과 로그인 폼의 상태를 관리하는 방법을 알아보겠습니다. 이전에 만들어 놓았던 auth 모듈을 다음과 같이 수정해 주세요.

    modules/auth.js

    import { createAction, handleActions } from 'redux-actions';
    import produce from 'immer';
    
    const CHANGE_FIELD = 'auth/CHANGE_FIELD';
    const INITIALIZE_FORM = 'auth/INITIALIZE_FORM';
    
    export const changeField = createAction(
      CHANGE_FIELD,
      ({ form, key, value }) => ({
        form, // register , login
        key, // username, password, passwordConfirm
        value, // 실제 바꾸려는 
      }),
    );
    export const initializeForm = createAction(INITIALIZE_FORM, form => form); // register / login
    
    const initialState = {
      register: {
        username: '',
        password: '',
        passwordConfirm: '',
      },
      login: {
        username: '',
        password: '',
      },
    };
    
    const auth = handleActions(
      {
        [CHANGE_FIELD]: (state, { payload: { form, key, value } }) =>
          produce(state, draft => {
            draft[form][key] = value; // : state.register.username 바꾼다.
          }),
        [INITIALIZE_FORM]: (state, { payload: form }) => ({
          ...state,
          [form]: initialState[form],
        }),
      },
      initialState,
    );
    
    export default auth;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.