Javascript 动作未定义或不可见,即使它似乎写得很好

Javascript 动作未定义或不可见,即使它似乎写得很好,javascript,function,redux,react-redux,Javascript,Function,Redux,React Redux,我必须对切换按钮使用useDispatch,所以我必须将它们从react到redux状态进行折射。我一直在遵循Redux的基础教程,我想我已经做得很好了,但是当我尝试至少使用Selector来显示Redux的状态按钮时,它没有显示任何内容 这是我的代码: //actions文件夹中的types.js export const TOGGLE = "TOGGLE"; export const toggle = () => { return { type: 'TOGGLE' }; };

我必须对切换按钮使用useDispatch,所以我必须将它们从react到redux状态进行折射。我一直在遵循Redux的基础教程,我想我已经做得很好了,但是当我尝试至少使用Selector来显示Redux的状态按钮时,它没有显示任何内容

这是我的代码:

//actions文件夹中的types.js

   export const TOGGLE = "TOGGLE";
 export const toggle = () => {
return {
type: 'TOGGLE'
};
};
//操作文件夹中的按钮操作

   export const TOGGLE = "TOGGLE";
 export const toggle = () => {
return {
type: 'TOGGLE'
};
};
//按钮减速器文件夹中的减速器

const buttonReducer = (state = true, action) => {
 switch(action.type) {
  case 'TOGGLE':
    return !state;
  default:
    return state;
};
};

 export default buttonReducer;
按钮减速机被导入组合减速机,组合减速机将被存储

组件代码:

import React, { useState, useEffect } from 'react'
import isloff from './mainpage_imgs/isloff.png'
import islon from './mainpage_imgs/islon.png'
import PropTypes from "prop-types";
import { connect, useDispatch, useSelector } from "react-redux";
import { toggle } from '../../actions/buttonActions'

  const Islbutton = props => {

const [open, setOpen] = useState(true);
const [role, setRole] = useState('');



useEffect(() => {
  if (props.auth.user) 
  { 
    setRole(props.auth.user.role);
  }
}, []);

const test = useSelector(state => state.button);

 const checkRole = (role) => {
  if (role === 'Menager' || role === 'Technolog')
   {
      return true }
    else 
    {
      return false
    };
}

const toggleImage = () => {
if(checkRole(role)) {
setOpen(!open)
};
}

     const getImageName = () => open ? 'islOnn' : 'islOfff'

const dispatch = useDispatch();

            return(

              <div>

                <img style={islplace} src={open ? islon : isloff }          
onClick={()=> dispatch(toggle())} />

              </div>
            );
    }


Islbutton.propTypes = {
button: PropTypes.func.isRequired,
auth: PropTypes.obj.isRequired
};

const mapStateToProps = state => ({
button: state.button,
auth: state.auth
});

export default connect(mapStateToProps, {}), (Islbutton);

根据您的最新评论和我对您的用例的理解,我可以建议以下方法:

//依赖关系 const{render}=ReactDOM, {createStore}=Redux, {connect,Provider}=ReactRedux //动作创造者 const SET_ROLE='SET_ROLE', 经理批准='经理批准', setRole=role=>{type:SET_role,role}, mngAppr==>{type:MANAGER_APPROVED} //初始状态、减速器、存储 const initialState={role:'Technolog',approved:false}, Appeducer=state=initialState,action=>{ 开关动作类型{ 案例集角色:{ const{role}=state, {role:newRole}=action 返回{…状态,角色:newRole} } 个案经理批准:{ const{approved}=状态 返回{…状态,已批准:!已批准} } 默认值:返回状态 } }, store=createStoreappReducer //模拟切换角色的ui组件 const SwitchRoles={currentRole,switchRole}=> switchRolee.target.value}/>管理器 switchRolee.target.value}/>技术日志 //连接单选按钮单击以切换角色操作 const mapDispatch=dispatch=>{switchRole:role=>dispatchsetRolerole}, SwitchRoleContainer=connectnull,mapDispatchSwitchRoles //要在全局状态内切换“已批准”的ui组件 const ToggleApprove={onApprove,isManager}=> 切换 //将onToggle处理程序连接到调度“切换”操作 const-mapStateToProps={role}=>{isManager:role=='Manager'}, mapDispatchToProps=dispatch=>{onApprove:=>dispatchmngAppr}, ToggleApproveContainer=ConnectMapStateTrops,mapDispatchToPropsToggleApprove //显示“打开”当前状态的ui组件 const IsApproved={IsApproved}=>{IsApproved?'Approved by manager':'notapproved by manager'} //将isOpen prop附加到全局“打开”变量 const mapState={approved}=>{isApproved:approved}, IsApprovedContainer=connectmapStateIsApproved //渲染应用程序 提供 , document.getElementById'root'
这与主要问题有关,因为代码不起作用。当然,我可以向您展示onClick={=>useDispatchtoggle},结果是“toggle未定义/不是函数”,但如果不展示我所做的代码,它就毫无价值了,对吧?好吧,我的错。现在就编辑谢谢你的建议,我会按照他们,因为这将帮助我提高,但现在它与dispatchtoggle一起工作。我有一个问题要问你,因为发生了一些意想不到的事情。它现在更改所有按钮的状态。在React中,它只为一个按钮工作,每个按钮都有自己的按钮。现在,无论我点击哪一个,它都会改变它们的状态。有没有办法让一个按钮处于一种状态,然后继续?我有16个相同的按钮查看调度开关你是对的,我太激动了;。关于你的后一个问题,我不太了解你的应用程序的全貌:这些按钮的状态是否取决于其他全局状态变量?您是否需要将这些按钮状态全局存储?然而,到目前为止,我已经在中总结了我的建议。如果它完全解决了您的问题,欢迎您投票/接受;或者在评论栏中继续提问。当然,我非常感谢你的回答和建议!哇,我会在一秒钟内测试它,但我害怕增加角色。这些按钮的全部用途是,仅当具有特定角色的用户登录时,才启用它们。所以,若具有动物园角色的用户登录,他实际上可以单击那个按钮来更改状态,从而更改图片。我只是不知道如何才能将角色要求添加到这一点上,根据我在顶部的问题,看起来是这样的:所有的按钮都被点击了,而只有一个真正被点击了。根据你的话“你需要全球存储吗?”悲哀的是,是的。即使应用程序关闭,我也必须将每个人的状态推送到localstorage以使他们保存,并且我还必须使用redux persist进行保存。我要尝试一下!我会稍微调整一下,因为可能会出现“无登录用户”的情况,即:“角色:”和“角色:korespondent”,但我认为我能够做到这一点,因为您刚刚创建了代码!该死,如果那是g
onna的工作,因为我认为它将那么你将是我的上帝为真的我可以问有什么办法联系你的情况下?我已经检查了你的建议,它的工作现象!我仍然在挣扎,如果我点击一个按钮,其余的按钮也会被点击。所有按钮都是一个组件