react-redux - Redux - 无法访问容器属性以将 api 凭据（从商店）传递给容器组件中的调用函数

Question

了解术语的人的快速版本：如何将我的 API 令牌传递给我的 redux 操作，而不将其传递给我传递（作为道具）回调函数以调度 API 调用操作的每个演示组件？API 函数更新后端数据库，然后更新 redux 存储。

我使用 connect 函数和 mapDispatchToProps 函数，并将一个函数传递给我的演示组件，该函数调用一个修改后端数据库以及 redux 存储数据的 API。我需要在我的 api 端点代码中对用户进行身份验证。我有一个 API 令牌，API 代码在数据库中查找它以确保它有效且未过期。当我的 html 通过 html 头中的脚本标记创建以生成全局 javascript 变量时，这些值将被传入。

我通过容器的 componentHasMounted 函数中的操作的初始调度将这些全局变量中的 apiToken 存储在 redux 存储中。

使用全局 javascript 变量在表示组件中获取 apiToken 值感觉不对，因为它们是可移植的。

将 apiToken 传递给每个表示组件感觉不正确，因为该结构旨在减少传递给每个组件的道具数量。

将 apiToken 凭据仅添加回 Container 组件对我来说是有意义的 - 所以我将凭据放在 mapDispatchToProps 函数内的 markAsComplete 函数调用中，将 auth 参数添加到从演示组件传递回的参数中我的容器组件。

但是，这不起作用，因为未定义 this.apiToken 和 this.byUserId - mapDispatchToProps 中的“this”与容器组件类的“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 应用程序 - 它对用户进行身份验证，生成随机 apiToken，将 apiToken 作为 users.apiToken 存储在 users 表中，并在 users.apiTokenExpiry 中过期。

标签： react-redux

Answer 1

尝试将其存储在 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));
  }

如果这不是参考问题，您能否分享您的商店的结构？