javascript - 即使看起来写得正确，该操作也是未定义或不可见的

Question

我必须使用 useDispatch() 作为我的切换按钮，所以我必须将它们从 React 折射到 Redux 状态。我正在遵循 Redux 基础知识教程，我认为我已经正确完成了这一点，但是当我尝试至少使用 Selector 来显示按钮的 redux 状态时，它没有显示任何内容。

这是我的代码:

//actions 文件夹中的 types.js

   export const TOGGLE = "TOGGLE";

//actions文件夹中的buttonActions

 export const toggle = () => {
return {
type: 'TOGGLE'
};
};

// reducer 文件夹中的buttonReducer

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

 export default buttonReducer;

buttonReducer被导入到combineReducers中并存储。

组件代码:

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);

Answer 1

根据您的最新评论以及我对您的用例的理解，我可能建议采用以下精炼方法:

//dependencies
const { render } = ReactDOM,
      { createStore } = Redux,
      { connect, Provider } = ReactRedux
      
//action creators
const SET_ROLE = 'SET_ROLE',
      MANAGER_APPROVED = 'MANAGER_APPROVED',
      setRole = role => ({type:SET_ROLE, role}),
      mngAppr = () => ({type:MANAGER_APPROVED})

//initial state, reducer, store
const initialState = {role:'Technolog', approved:false},
      appReducer = (state=initialState, action) => {
        switch(action.type){
          case SET_ROLE : {
            const {role} = state,
                  {role: newRole} = action
            return {...state, role: newRole}
          }
          case MANAGER_APPROVED : {
            const {approved} = state
            return {...state, approved: !approved}
          }
          default: return state
        }
      },
      store = createStore(appReducer)

//ui component to emulate toggling roles
const SwitchRoles = ({currentRole, switchRole}) => (
    <div>
      <label><input type="radio" name="role" value="Manager" onChange={e => switchRole(e.target.value)} />Manager</label>
      <label><input type="radio" name="role" value="Technolog"  onChange={e => switchRole(e.target.value)} />Technolog</label>
    </div>
)

//connect radio buttons click to togling roles action
const mapDispatch = dispatch => ({switchRole: role => dispatch(setRole(role))}),
      SwitchRolesContainer = connect(null,mapDispatch)(SwitchRoles)

//ui component to toggle 'approved' within global state      
const ToggleApprove = ({onApprove,isManager}) => (
  <button onClick={onApprove} disabled={!isManager}>Toggle</button>
)

//connect onToggle handler to dispatching 'toggle' action
const mapStateToProps = ({role}) => ({isManager: role == 'Manager'}),
      mapDispatchToProps = dispatch => ({onApprove: () => dispatch(mngAppr())}),
      ToggleApproveContainer = connect(mapStateToProps, mapDispatchToProps)(ToggleApprove)
      
//ui component to display current state of 'open'       
const IsApproved = ({isApproved}) => <div>{isApproved ? 'Approved by manager' : 'Not approved by manager'}</div>

//attach isOpen prop to global 'open' variable
const mapState = ({approved}) => ({isApproved: approved}),
      IsApprovedContainer = connect(mapState)(IsApproved)
      
//render the app
render (
  <Provider store={store}>
    <SwitchRolesContainer />
    <IsApprovedContainer />
    <ToggleApproveContainer />
  </Provider>,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.3/react-redux.min.js"></script><div id="root"></div>

希望它能让您了解切换全局变量并将其值映射到本地组件状态。