ReactJs mapStateToProps

Question

У меня проблемы с моим Reactapp. Я пытаюсь аутентифицировать пользователя и получить некоторые данные из моего бэкэнда, и mapStateToProps - небольшая проблема. Вот как я получаю только успешно пользователя:

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

И вот как я получаю эти данные из API, также успешно

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

Теперь мне нужно объединить это Как-то mapStateToProps, я пробовал разные методы, такие как:

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

В этом случае он не аутентифицирует пользователя. Как их объединить?

Это мой полный код без импорта:

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)

Answer 1

Это должно быть

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

или

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

Второй параметр mapStateToProps равен ownProps, а не auth. Что вам нужно, это извлеченный auth из состояния.

Answer 2

Попробуйте

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