Redux传递输入校验结果异常：获取值为undefined问题排查

问题背景 #

实现输入校验功能，通过Redux将校验结果传递到其他组件。已配置action、reducer及根reducer，输入组件可通过dispatch触发状态更新，但SignUpLoginButton组件使用useSelector获取状态时返回undefined。

核心错误点 #

属性名拼写大小写不一致：

• 在SignUpEmail reducer的初始状态中，定义的状态属性为**isEmail**（E小写）
• 在SignUpLoginButton组件的useSelector中，错误写为**isEMail**（M大写）
  这种拼写不匹配导致无法正确读取Redux状态，返回undefined。

修复步骤 #

1. 修正组件中的属性拼写 #

修改SignUpLoginButton.jsx中的useSelector语句，确保属性名与reducer定义一致：

// SignUpLoginButton.jsx
function SignUpLoginButton({email, name, userName, passWord}) {
  // 修正isEMail为isEmail
  const checkEMail = useSelector(state => state.SignUpEmail.isEmail)

  console.log('checkEmail :', checkEMail)

  return (
    <ButtonWrap>
      <div>가입</div>
    </ButtonWrap>
  )
}

2. 可选优化建议 #

• 统一Action Type命名：将"True"/"False"替换为语义化常量，避免字符串拼写错误：

// EmailAction.jsx
export const SET_EMAIL_VALID = 'SET_EMAIL_VALID'
export const SET_EMAIL_INVALID = 'SET_EMAIL_INVALID'

export const yesEmail = () => ({ type: SET_EMAIL_VALID })
export const noEmail = () => ({ type: SET_EMAIL_INVALID })

同时更新reducer中的case匹配：

// SignUpEmail.jsx
import { SET_EMAIL_VALID, SET_EMAIL_INVALID } from './EmailAction'

const initialState = { // 修正initailState为initialState
  isEmail: false
}

const SignUpEmail = (state=initialState, action) => {
  switch(action.type) {
    case SET_EMAIL_VALID : 
      return { ...state, isEmail: true }
    case SET_EMAIL_INVALID : 
      return { ...state, isEmail: false }
    default : return state  
  }
}

• 使用Action Creators：在SignUpEmailInput组件中直接调用定义好的action creators，避免手动编写action对象：

// SignUpEmailInput.jsx
import { yesEmail, noEmail } from './EmailAction'

const emailPhoneCheck = () => {
  if(isCorrectEmail || isPhone) {
    dispatch(yesEmail())
  } else {
    dispatch(noEmail())
  }
}

内容的提问来源于stack exchange，提问作者MontaKr