Search code examples
reactjsreduxreact-reduxreact-propsprop

how to Pass props from react-redux to container component?


here is my code in redux ,everythig is fine the code are working

export const loginUser = (values, history, setFieldError, setSubmitting) => {

i take **email**, split it until @ and take it as a username ,
    const username = values.email.split("@")[0]

    return () => {

//then i pass it to axios params as a query  name  
        axios.get(url, {
            params: {
                name: username
            }
        }).then((response) => {
            //if res ok
            console.log("username", username)
            history.push("/user")
        }).catch(error => console.error(error))
        setSubmitting(false);
    }

}

now i should pass that usernam as a props to my Dashboard witch is a component

const Dashboard = ({logoutUser,user}) => {
    const history = useHistory();
    return (
           <StyledFromArea bg={colors.dark2}>
              
here i need to show a *username*  
should be like  **Hello , YourName** 

                <StyledTitle size={65}>Hello, {user.user}
                       //but its undefided 
                    {console.log("user",user.name)}
                </StyledTitle>

*same  here*
                <ExtraText color={colors.light1}>{user.email}</ExtraText>
                {console.log("email",user.email)}
                <Userinfo/>

                <ButtonGroup>
                 <StyledButton to="#" onClick={()=> logoutUser(history)}> Logout 
                </StyledButton> 
                </ButtonGroup>

            </StyledFromArea>
    )
}

//i use **mapStateToProps**but maybe it's not working ,i think the //problem comes from here

const mapStateToProps =({session})=>({
        user:session.user
})

export default connect(mapStateToProps,{logoutUser})(Dashboard) ;

my code https://codesandbox.io/s/login-page-forked-6gcvq?file=/src/pages/Dashboard.js


Solution

  • First you must use connect with class componets but you use functional style. Seсond in session absent your user data, you must create another reducer for user. Demo