使用Redux实现登录模态窗报错：Uncaught TypeError求助

我尝试用Redux实现点击按钮显示登录模态窗的功能：

• 创建了loginClick reducer，定义切换isClick状态的Yes/No action
• 在NaviRight组件的登录按钮中dispatch "Yes" action
• 在SiteHomepage组件用useSelector获取state.loginClick.isClick控制Login1组件显示

运行时出现错误：Uncaught TypeError: Cannot read properties of undefined (reading "isClick")，已排查登录组件和Redux Store本身无问题，请求修复。

相关代码 #

rootReducer（index.js）

import { combineReducers } from "redux";
import goodsReducer from "./counter";
import loginClick from "./loginClick";

const rootRudcer = combineReducers(
  {
    goodsReducer,
    loginClick
  }
)

export default rootRudcer;

loginClick reducer（loginClick.jsx）

export const yesClick = () => {
  return{
    type : 'Yes',
  }
} 

export const noClick = () => {
  return{
    type : 'No',
  }
} 

const initialState = {
  isClick : false
}

const loginClick = (state = initialState, action) => {
  switch(action.type) {
    case "Yes" :
      return {
        ...state,
        isClick : true
      }
    case "No" :
      return {
        ...state,
        isClick : false
      }
    default :
      return {
        ...state,
      }  
  }
}

export default loginClick;

NaviRight组件

import React from 'react';
import styled from 'styled-components';
import '../navi.css';
import { useDispatch } from 'react-redux';

const Login = styled.div`
`
const Regi = styled.div`
`

function NaviRight() {
  const dispatch = useDispatch();
  return (
    <div id='NaviRight'>
      <Login onClick={()=>{dispatch({type:"Yes"})}}>
        login
      </Login >
      <Regi>
        회원가입
      </Regi>
    </div>
  )
}

export default NaviRight;

SiteHomepage组件

import React from 'react';
import Top from './Header/Top';
import Navi from './Header/Navi/Navi';
import Body from './Body/Body';
import Footer from './Footer/Footer';
import { useSelector } from 'react-redux';
import Login1 from './Login/Login1';

function SiteHomepage (props) {
  const loginButton = useSelector(state => state.loginClick.isClick);
  return (
    <>
      {loginButton&&Login1}
      <Top />
      <Navi />
      <Body />
      <Footer />
    </>
  );
}

export default SiteHomepage;

1. 修正rootReducer的拼写错误 #

根reducer变量名拼写错误：rootRudcer应为rootReducer，这会导致Store无法正确加载根reducer，最终state结构异常，出现loginClick未定义的错误。

修改rootReducer文件：

const rootReducer = combineReducers(
  {
    goodsReducer,
    loginClick
  }
)

export default rootReducer;

2. 修正组件渲染方式 #

在SiteHomepage中，{loginButton&&Login1}的写法错误，组件必须以JSX标签形式（<Login1 />）渲染，否则只是引用组件对象，不会触发组件渲染。

修改SiteHomepage组件：

return (
  <>
    {loginButton && <Login1 />}
    <Top />
    <Navi />
    <Body />
    <Footer />
  </>
);

3. （可选）使用action creator优化代码 #

你已经定义了yesClick action creator，建议直接使用它代替手动编写action对象，避免拼写错误：

修改NaviRight组件：

import { yesClick } from '../path/to/loginClick';

function NaviRight() {
  const dispatch = useDispatch();
  return (
    <div id='NaviRight'>
      <Login onClick={()=>{dispatch(yesClick())}}>
        login
      </Login >
      <Regi>
        회원가입
      </Regi>
    </div>
  )
}

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