当我尝试访问 redux 状态时，它返回 undefined答案

【问题标题】：when i try to access redux state it returns undefined当我尝试访问 redux 状态时，它返回 undefined
【发布时间】：2020-05-21 08:43:28
【问题描述】：

我可以调度我的状态，但我在 redux 中访问它时遇到问题

import React, {useEffect} from 'react';
import AuthenticationPage from './AuthenticationPage';
import '../styles/App.css';
import SignOut from './SignOut';
import{TOGGLE_LOGIN} from "../redux/actionTypes"
import{connect} from 'react-redux'

function App(props) {

  useEffect(()=>{
    if(window.localStorage.getItem('IsUserLogged')==="true"){
      props.toggleLogin();
    }
    console.log(props.isLogged);    //console show undefined  
  },[])

  return (
    <div className="App">
      {props.isLogged===true?
      <SignOut/>:
      <AuthenticationPage/>}
    </div>
  );
}

const mapStateToProps = state =>{
  return{
    isLogged: state.isLogged
  }
}

const mapDispatchToProps = dispatch=>{
  return{
    toggleLogin: ()=>dispatch({type: TOGGLE_LOGIN})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

我安装了 redux 开发工具，它显示我的状态正在运行

我也可以用 props.toggleLogin(), 切换我的状态

但是当我尝试使用 props.isLogged 获取我的状态值时，它返回 undefined 而不是 true/false。

这是我的 redux 代码：

reducers/logIn.js

import{TOGGLE_LOGIN} from "../actionTypes"

const initialState={
    isLogged: false,
}

const LogInReducer = (state=initialState, action)=>{
    switch(action.type){
        case TOGGLE_LOGIN:{
            return Object.assign({}, state, {
                isLogged: !state.isLogged
            })
        }
        default:{
            return state;
        }
    }
}

export default LogInReducer;

reducers/index.js

import{combineReducers} from "redux";
import LogInReducer from './logIn.js';

export default combineReducers({
    LogInReducer
})

actions.js

import{TOGGLE_LOGIN} from "./actionTypes"

export const ToggleLogin=()=>({
        type: TOGGLE_LOGIN
});

actionTypes.js

export const TOGGLE_LOGIN="TOGGLE_LOGIN";
});

store.js

import {createStore} from 'redux';
import rootReducer from './reducers';

export default createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

【问题讨论】：

如果您创建一个单独的useEffect 挂钩来记录isLogged 状态的值，会发生什么？喜欢useEffect(() => { console.log(props.isLogged); }, [props.isLogged])。 +1：还有一条评论，我猜可能useDispatch 和useSelector 更适合函数组件，而不是mapDispatchToProps 和mapStateToProps。如果您对这些示例感兴趣，请查看我的存储库之一：github.com/norbitrial/react-redux-loading-data-example
@norbitrial，通过使用useDispatch，您可以让 FC 了解 Redux，这可能不是您在所有情况下都想要的。注意connect() 是一个 HOC。
约瑟夫的回答帮助了我，现在可以了，谢谢你的推荐，我会检查的！

标签： reactjs redux react-redux

【解决方案1】：

那是因为在您的 combineReducer 中有一个 LogInReducer 键。

所以状态实际上是LogInReducer.isLogged（在您的 redux-dev-tool 屏幕截图中也可以看到）。

您可能想要这样做：

const mapStateToProps = state => {
  const { isLogged } = state.LogInReducer;

  return {
    isLogged
  };
}

【讨论】：