0

I'm having some trouble integrating React Redux. When I attempt to mapStateToProps and utilize the state, I receive errors that Property 'token' does not exist on type ReadOnly <state>.

I found another post that was similar but it seemed to imply that you don't need a constructor anymore. I believe removing the constructor would remove the components local state properties as well as the bind call that is made in the constructor, which I want to merge with not remove and overwrite. Link to stack overflow post

interface Props {
  user: User | null
  sidebarSelectedIndex: string | null
  classes: any,
  token: any
}

interface State {
}


class TopBar extends React.Component<Props, State> {
  constructor(props: Props){
     super(props);
     this.handleListItemClick = this.handleListItemClick.bind(this);
  }
  //..some other functions
  render(){
     const { token } = this.state;
     if (token === ''){
       //return unauthenticated JSX nav menu
     }//endif
     else {
       //return authenticated JSX nav menu
     }
  }//end render

}//end TopBar Class
...

//trying to get the slice I made, user-slice, and its field "token" (for JWT) for use here

const mapStateToProps = (state:any) => ({
  token: state.user.token
})

let WrappedTopBar = withStyles(useStyles)(TopBar);
export default connect(mapStateToProps)(WrappedTopBar);
gnu_byte
  • 41
  • 1
  • 5

2 Answers2

1

I think the issue here is in casting state in mapStateToProps as any. Try to cast state as RootState. Read more about RootState and getting it from root reducer in official RTK documentation.

Mike Kokadii
  • 509
  • 5
  • 17
-1

reduxjs/toolkit actually mapStateToProps passes the states through props So you have to use it like this:

this.props.token
Mohammad Mahmudipur
  • 19
  • 3