Redux - не удается получить доступ к свойствам контейнера для передачи учетных данных API (из хранилища) вызывающей функции в компоненте контейнера

Question

Быстрая версия для людей, которые знакомы с терминологией: как передать мой API-ток в мои избыточные действия, не передавая его каждому компоненту презентации, которому я передаю (в качестве подпорки) функции обратного вызова для отправки вызывающих действий API-интерфейса?Функция API обновляет базу данных бэкэнда, а затем обновляет хранилище редуктов.

Я использую функцию соединения и функцию mapDispatchToProps и передаю моему компоненту презентации функцию, которая вызывает API, который изменяет базу данных бэкэнда, а такжеизбыточное хранилище данных.Мне нужно аутентифицировать пользователя в моем коде конечной точки API.У меня есть токен API, который API-код ищет в БД, чтобы убедиться, что он действителен и не истек.Эти значения передаются, когда мой html создается с помощью тега script в заголовке html для создания глобальных переменных javascript.

Я сохраняю apiToken из этих глобальных переменных в хранилище избыточных данных при первоначальной отправке действия вфункция componentHasMounting контейнера.

Неправильно использовать глобальные переменные javascript для получения значения apiToken в компонентах представления, поскольку они должны быть переносимыми.

Не чувствуетсяправо передавать apiToken каждому компоненту презентации, так как эта структура предназначена для уменьшения количества реквизитов, передаваемых каждому компоненту.

Для меня имеет смысл добавлять учетные данные apiToken только обратно вКонтейнерный компонент - поэтому я поместил учетные данные в вызове функции markAsComplete внутри функции mapDispatchToProps, добавив параметры auth к параметрам, переданным из компонента презентации обратно в мой контейнерный компонент.

ОДНАКО, этоне работает, так как this.apiToken и this.byUserId не определены - 'this' внутри mapDispatchToProps отличается от 'this' класса компонента контейнера.

Как другие достигают этого?

У меня есть функция контейнера, подобная этой:

`` `

class Container extends Component {

  componentDidMount() {
    var storeState = this.context.store.getState();
    if (storeState && storeState.auth) {
      this.byUserId = storeState.auth.userId;
      this.apiToken = storeState.auth.apiToken;
      this.idOfChosenEntity = globalVarDeclaredInHtmlHeader;
    } else {
      this.byUserId     = false;
      this.apiToken     = false;
      this.idOfChosenEntity = false;
    }
    this.props.dispatch(Actions.fetchDataIntoStoreForChosenEntity(this.byUserId,this.apiToken,this.idOfChosenEntity));
  }

  render() {

    return (
      <DisplayComponent
        chosenEntitysData = {this.props.chosenEntitysData}
        markAsComplete = {this.props.markAsComplete}
      />
    );
  }

}
Container.contextTypes = {
     store: PropTypes.object
}
const mapDispatchToProps = (dispatch) => {

  return {
    dispatch: dispatch,
    markAsComplete: (idOfChosenEntity) => {
      dispatch(Actions.markAsComplete(this.byUserId,this.apiToken,idOfChosenEntity));
    },
  }
}
const mapStateToProps = state => {
  return {
    chosenEntitysData: state.chosenEntitysData
  };
};

export default connect(mapStateToProps,mapDispatchToProps )(Container)

` ``

Мой бэкэнд-API - это приложение Laravel PHP - оно аутентифицируетusers, генерирует случайный apiToken, сохраняет apiToken в таблице users как users.apiToken с истечением срока в users.apiTokenExpiry.

Answer 1

Я узнал, что у mapDispatchToProps есть второй параметр 'ownProps'.

Когда я вызываю вызов ReactDOM.render, я включаю глобальные переменные, подобные этому:

ReactDOM.render(
    <Provider store={store}>
        <UserDetailsContainer
            userIdBy = {userIdBy}
            apiToken = {apiToken}

        />
    </Provider>,
    htmlElement
);

userIdByи apiToken глобальные переменные javascript определены в теге script в голове - я использую шаблон лезвия, обслуживаемый из PHP (Laravel):

<script>
  var userIdBy = {{$byUserId}};
  var apiToken = '{{$apiToken}}';
</script>

mapDispatchToProps Я могу ссылаться на эти значения через необязательный параметр ownProps 2nd:

const mapDispatchToProps = (dispatch,ownProps) => {

  return {
    dispatch: dispatch,
    markAsComplete: (idOfChosenEntity) => {
      dispatch(Actions.markAsComplete(ownProps.byUserId,ownProps.apiToken,idOfChosenEntity));
    },
  }
}

Answer 2

Попробуйте просто сохранить его в let или const.Не уверен, что это сработает или нет, но это может решить вашу проблему.

  componentDidMount() {
    var storeState = this.context.store.getState();
    if (storeState && storeState.auth) {
      const byUserId = storeState.auth.userId;
      const apiToken = storeState.auth.apiToken;
      const idOfChosenEntity = globalVarDeclaredInHtmlHeader;
    } else {
      const byUserId     = false;
      const apiToken     = false;
      const idOfChosenEntity = false;
    }
    this.props.dispatch(Actions.fetchDataIntoStoreForChosenEntity(byUserId,apiToken, idOfChosenEntity));
  }

Если это не ссылочная проблема, можете ли вы рассказать о структуре вашего магазина?