스터디스터디
98
2021-07-05 15:18:16
0
69

redux typescript 전환 오류 질문


안녕하세요. js로 작성된 리듀서를 ts로 변환하는 과정에서 해결이 안돼 질문 드립니다.

부족한 설명 죄송합니다. 설명에 대해 궁금증 있다면 답변 부탁드립니다 !

interface IChangeFiled {
  formstring;
  keystring;
  valuestring;
}

export const changeField = ({ formkeyvalue }: IChangeFiled=> ({
  type: CHANGE_FIELD,
  form// lgoin인지, register 인지
  key// userId, password...
  value// 실제 바꾸려는 값
});

type AuthState = {
  login: {
    emailstring | null;
    userIdstring | null;
    passwordstring | null;
  };
};

const initialStete = {
  login: {
    email: null,
    userId: null,
    password: null,
  },
};

const auth = (
  stateAuthState = initialStete,
  actionAuthAction,
): AuthState => {
  switch (action.type) {
    case CHANGE_FIELD:
      return {
        ...state,
        [action.form]: {
          // ...state[action.form],
          ...state['login'],
          [action.key]: action.value,
        },
      };


코드 설명을 드리자면, 

changeFiled 액션을 통해 로그인 화면이라면 form = 'login', 회원가입이러면 form = 'register'을 보냅니다.

form 과 함께 key와 value를 같이 전달해 입력폼의 이름과 값을 전달합니다. ( key = name, value = value )

리듀서에는 다음 입력폼으로 넘어가도 입력폼이 사라지지 않게 ...state[action.form]을 이용해 입력폼을 유지하려고 합니다. 여기서 문제인게 js에서는 가능한 코드인데, ts로 변환하면 

'string' 형식의 식을 'AuthState' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.

라는 오류가 발생합니다. AuthState 안에 이미 login 타입이 있는데 어디서 문제가 발생한걸 까요?

...state['login']은 에러 없이 작동합니다. 하지만 똑같은 ...state[action.form]와 무슨 차이가 있는걸까요 ?

0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.