Reactjs 我能'；无法从应用程序组件中的Redux应用商店中获取值

我使用的是Redux DevTools Chrome扩展，从中可以看出Redux存储中的auth.isSignedIn是通过Register组件正确填充的。但是当我重定向到主页时，当它重新启动时，我无法访问App.js中的this.state.auth.isSignedIn以正确地将用户路由到正常的主页组件。我做错了什么？这是我完成培训后的第一个独立React项目（但我已经做了很长时间的开发人员）

App.js应用程序组件

import React  from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import Header from './Header';
import history from '../history';
import Login from './Login/Login';
import Register from './Login/Register';

class App extends React.Component {
    state = { isSignedIn: null };
    
    render(){
      
        console.log('getting isSigned in');
        if(this.state.auth && this.state.auth.isSignedIn){
            console.log('it has VALUE');
            console.log(this.state.auth.isSignedIn);
        }else{
            console.log('no isSignedIn');
        }
    }
}
const mapStateToProps = (state) => {
    return { isSignedIn: state.auth.isSignedIn };
};
export default connect(mapStateToProps)(App);

import React from 'react';
import { register } from '../../actions';
import { connect } from 'react-redux';
import LoginForm from './LoginForm';
    
class Register extends React.Component {
            
    onSubmit = (formValues) => {
        this.props.register(formValues);
    }

    render(){
        return(
            <div >
             <LoginForm formHeading="Register Now" onSubmit={this.onSubmit} />
            </div>
          );
    }
}

const mapStateToProps = (state) => {
    return { isSignedIn: state.auth.isSignedIn };
};
export default connect(mapStateToProps, { register })(Register);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';

import App from './components/App';
import reducers from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(reduxThunk))
    );

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
document.querySelector('#root')
);

reducers/authReducer.js Reducer

import { SIGN_IN, SIGN_OUT, REGISTER } from '../actions/types';

const INITIAL_STATE = {
    isSignedIn: null,
    userId: null
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type){
        case REGISTER:
            return {...state, isSignedIn: true, userId: action.payload };
        case SIGN_IN:
            return {...state, isSignedIn: true, userId: action.payload };
        case SIGN_OUT:
            return {...state, isSignedIn: false, userId: null};
        default:
            return state;
    }
};

---

要从商店中获得一些东西，您应该使用钩子名称useSelector from

react redux

从'react redux'导入{useSelector}
//内部组件
const state=useSelector（state=>state）//返回整个存储
const isSignedIn=useSelector（state=>state.auth.isSignedIn）//仅返回isSignedIn值

将

mapstatetops

参数传递到

connect

函数时，会将redux状态添加到

此.props

---

在您的情况下，您应该能够通过使用

this.props.isSignedIn

访问

isSignedIn

，您正在使用此功能将redux状态映射到您的道具：

const-mapStateToProps=（state）=>{
//建议，映射整个auth对象：
//返回{auth:state.auth}；
返回{isSignedIn:state.auth.isSignedIn}；
};

在这里，您表示希望用redux state.auth.isSignedIn填充属性isSignedIn。
正如函数名所述：您正在将redux状态映射到道具

在代码中，您再次使用状态来尝试获取以前映射的值

类应用程序扩展了React.Component{
//state={isSignedIn:null}；可以删除它
//为了简单易懂，我建议
//将你的道具分解成如下单独的变量
const{isSignedIn}=this.props；//这个答案对于类组件（App.js是类组件）来说是不正确的。谢谢你的回答！这很有效！
import { SIGN_IN, SIGN_OUT, REGISTER } from '../actions/types';

const INITIAL_STATE = {
    isSignedIn: null,
    userId: null
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type){
        case REGISTER:
            return {...state, isSignedIn: true, userId: action.payload };
        case SIGN_IN:
            return {...state, isSignedIn: true, userId: action.payload };
        case SIGN_OUT:
            return {...state, isSignedIn: false, userId: null};
        default:
            return state;
    }
};