适用于了解术语的人的快速版本：如何将我的 API 令牌传递给我的 redux 操作，而不将其传递给我传递（作为道具）回调函数以分派 API 调用操作的每个演示组件？API 函数更新后端数据库，然后更新 redux 存储。
我使用 connect 函数和 mapDispatchToProps 函数，并将一个调用 API 的函数传递给我的演示组件，该 API 修改后端数据库以及 redux 存储数据。我需要在我的 api 端点代码中对用户进行身份验证。我有一个 API 令牌，API 代码在数据库中查找该令牌以确保它有效且未过期。当我的 html 通过 html 头中的脚本标记创建以创建全局 javascript 变量时，会传入这些值。
我通过容器的 componentHasMounted 函数中的操作的初始分派将来自这些全局变量的 apiToken 存储在 redux 存储中。
使用全局 javascript 变量来获取演示组件中的 apiToken 值感觉不合适，因为它们是可移植的。
将 apiToken 传递给每个演示组件感觉不太对，因为该结构旨在减少传递给每个组件的 props 的数量。
对我来说，将 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 中过期。
我了解到 mapDispatchToProps 有第二个参数“ownProps”。
在我调用 ReactDOM.render 调用的地方，我包含了这样的全局变量：
ReactDOM.render(
<Provider store={store}>
<UserDetailsContainer
userIdBy = {userIdBy}
apiToken = {apiToken}
/>
</Provider>,
htmlElement
);
userIdBy 和 apiToken javascript 全局变量在头部的脚本标记中定义 - 我使用的是从 PHP (Laravel) 提供的刀片模板：
<script>
var userIdBy = {{$byUserId}};
var apiToken = '{{$apiToken}}';
</script>
mapDispatchToProps 我可以通过 ownProps 第二个可选参数来引用这些值：
const mapDispatchToProps = (dispatch,ownProps) => {
return {
dispatch: dispatch,
markAsComplete: (idOfChosenEntity) => {
dispatch(Actions.markAsComplete(ownProps.byUserId,ownProps.apiToken,idOfChosenEntity));
},
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句