[英]React Component doesn't read state from reducer with 'mapStateToProps'
I am using reducer to read states and see if the user is authenticated.我正在使用 reducer 来读取状态并查看用户是否经过身份验证。 I can read the states from other files but only one particular file cannot read states.
我可以从其他文件中读取状态,但只有一个特定文件无法读取状态。
below, I define mapStateToProps下面,我定义了 mapStateToProps
const mapStateToProps = state => ({
user: state.auth.user,
isAuthenticated: state.auth.isAuthenticated,
});
export default connect(mapStateToProps)(ViewJobPage);
and here is the render method of component这是组件的渲染方法
render() {
const {user, isAuthenticated} = this.props;
if(!isAuthenticated){
return <Redirect to='/'/>;
}
return(
<Card
style={{ width: 300 }}
cover={
<img
alt="example"
src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
/>
}
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
>
<Card.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
//title={user.username}
//description={"Email: " + {user.email}}
/>
</Card>
);
}
EDIT: here is my reducer file called 'auth.js' it stores the states of user as an object and isAuthenticated as a boolean编辑:这是我的减速器文件,名为“auth.js”,它将用户的状态存储为 object 并被认证为 boolean
First, I define the initial states, then change it and as mentioned above, I can read the states from other files so this file should be working.首先,我定义初始状态,然后对其进行更改,如上所述,我可以从其他文件中读取状态,因此该文件应该可以工作。 Also one additional detail, when I first executed the code like this, it worked on ViewPage, but when I re-ran do code with no additional changes, it stopped reading.
还有一个额外的细节,当我第一次执行这样的代码时,它在 ViewPage 上运行,但是当我重新运行代码而不进行额外更改时,它停止读取。 Could it be related to maybe a mixed file path?
它可能与混合文件路径有关吗?
// frontend/src/reducers/auth.js
import {
USER_LOADING,
USER_LOADED,
AUTH_ERROR,
REGISTER_FAIL,
REGISTER_SUCCESS,
LOGIN_SUCCESS,
LOGIN_FAIL,
LOGOUT_SUCCESS,
} from '../actions/types';
const initialState = {
isLoading: false,
isAuthenticated: null,
user: null,
token: localStorage.getItem('token')
};
export default function(state = initialState, action) {
switch (action.type) {
case USER_LOADING:
return {
...state,
isLoading: true
};
case USER_LOADED:
return {
...state,
isLoading: false,
isAuthenticated: true,
user: action.payload
};
case LOGIN_SUCCESS:
localStorage.setItem('token', action.payload.token);
return {
...state,
isLoading: false,
isAuthenticated: true,
...action.payload
};
case AUTH_ERROR:
case REGISTER_FAIL:
case REGISTER_SUCCESS:
case LOGIN_FAIL:
localStorage.removeItem('token');
return {
...state,
isLoading: false,
isAuthenticated: false,
user: null,
token: null
};
case LOGOUT_SUCCESS: // added
localStorage.removeItem('token');
return {
...state,
isLoading: false,
isAuthenticated: false,
user: null,
token: null
};
default:
return state;
}
}
EDIT 2: I have used Redux Extension to view state, as suggested.编辑 2:按照建议,我已使用 Redux 扩展来查看 state。 The state seems to be proper.
state 似乎是合适的。
{
type: 'USER_LOADED',
payload: {
id: 1,
username: 'david',
email: 'david@admin.com',
is_employer: true,
is_employee: false
}
}
Thank you for your help!谢谢您的帮助!
You are calling connect
twice.您正在调用
connect
两次。 You only need to call it once.你只需要调用一次。
So instead of this:所以代替这个:
ViewJobPage = connect(
mapStateToProps
)(ViewJobPage);
export default connect(mapStateToProps)(ViewJobPage);
You should write this:你应该这样写:
export default connect(mapStateToProps)(ViewJobPage);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.