时间戳

首页 > 解决方案 > 当我尝试访问 redux 状态时，它返回 undefined

reactjs - 当我尝试访问 redux 状态时，它返回 undefined

问题描述

我可以调度我的状态，但我在 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 获取我的状态值时，它返回未定义而不是真/假。

这是我的 redux 代码：

减速器/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;

减速器/index.js

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

export default combineReducers({
    LogInReducer
})

动作.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__());

标签： reactjsreduxreact-redux

解决方案

那是因为在你combineReducer身上你有一把LogInReducer钥匙。

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

您可能想要这样做：

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

  return {
    isLogged
  };
}

推荐阅读