CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
user10099265
user10099265

Reputation: 7

ReactJs mapStateToProps

I'm having some problems with my Reactapp. I'm trying to authenticate user and get some data from my backend, and mapStateToProps are little problem. This is how I'm getting successfully only user:

 const mapStateToProps = ({auth}) => {
  const {authUser} = auth;
  return {authUser}
};

And this is how I'm getting that data from api, also successfully

const mapStateToProps = (state) => {
  return {
    serversList: state.servers.servers,
  }
}

Now I need to combine that mapStateToProps somehow, I tried different methods like:

 const mapStateToProps = ( state, auth ) => {
        const {authUser} = auth;
        return {
            authUser,
            serversList: state.servers.servers,
        }
    };

In that case, it doesn't authenticate user. How to combine them?

This is my full code, without some imports:

import { requestServers  } from '../../../appRedux/actions';

const mapStateToProps = ( state, auth ) => {
    const {authUser} = auth;
    return {
        authUser,
        serversList: state.servers.servers,
    }
};


const mapDispatchToProps = (dispatch) => {
return {
  onRequestServers: () => dispatch(requestServers())
}
}


class Dashboard extends Component {


    componentDidMount() {
        this.props.onRequestServers();
      }


    render() {
        const {authUser} = this.props;
        const { serversList } = this.props;


        return (
            <Row>
        <Col xl={12} lg={24} md={12} sm={24} xs={24}>
        <UserInfo userName={authUser ? authUser.name : "Guest"}/>
        </Col>
        <Col xl={12} lg={24} md={12} sm={24} xs={24}>
          <BillingProfile balance={authUser ? authUser.stanje : "0"}/>
        </Col>
            <Col span={24}>
            <Servers />
            </Col >
            </Row>

        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)

Upvotes: 0

Views: 70

Answers (2)

Vishnu
Vishnu

Reputation: 1701

Try

const mapStateToProps = ({ auth, servers }) => ({
  authUser: auth.authUser,
  serversList: servers.servers,
});

Upvotes: 1

Tan Dat
Tan Dat

Reputation: 3117

It should be 

const mapStateToProps = (state) => {
    const {authUser} = state.auth;
    return {
        authUser,
        serversList: state.servers.servers,
    }
};

or 

const mapStateToProps = ({servers, auth}) => {
    const {authUser} = auth;
    return {
        authUser,
        serversList: servers.servers,
    }
};

The second param of mapStateToProps is ownProps not auth. What you need is the extracted auth from state.

Upvotes: 2

Related Questions