react-native - 在 Redux 中存储一个值

Question

我正在构建一个 React Native 应用程序，主要用于验证门票，供事件管理员使用。后端由带有工作 OAuth2 服务器的 Laravel 应用程序提供服务。我有一个针对该服务器的有效登录，但现在我需要存储访问 token 、请求数据(例如事件)并验证票证是否与给定事件匹配。

我正在尝试实现 Redux 来存储访问 token 等。我的登录表单通过操作正确地更新了商店，但我无法让它与访问 token 一起使用。

这是登录界面:

import React, { Component } from 'react';
import { Text, View, TextInput, Button } from 'react-native';
import { connect } from 'react-redux'
import StringifyBody from './../lib/oauth2/StringifyBody'
import { login, storeTokens } from '../redux/actions/auth.js'

class Login extends Component {
  constructor (props) {
      super(props);
      this.state = {
          route: 'Login',
          loading: false,
          email: '',
          password: '',
          accessToken: '',
      };
  }

  handleClick (e) {
    e.preventDefault();

    return new Promise(function(resolve, reject) {
    var data = StringifyBody(this.state.password, this.state.email)

        // XHR settings
        var xhr = new XMLHttpRequest()
        xhr.withCredentials = true

        xhr.onerror = function() {
            reject(Error('There was a network error.'))
        }

        xhr.open("POST", "http://192.168.0.141/oauth/access_token")
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")

        xhr.send(data)

        xhr.onloadend = function() {

            if (xhr.status === 200) {

                var parsedJson = JSON.parse(xhr.response)

                responseArray = []

                for(var i in parsedJson) {
                    responseArray.push([parsedJson [i]])
                }

                // assign values to appropriate variables
                let accessToken = responseArray[0];

                console.log('access token is: ' + accessToken)

                accessToken => this.setState({ access_token: accessToken })

                this.props.tokenStore(this.state.accessToken)  // This doesn't work: "cannot read property 'tokenStore' of undefined"

                resolve(xhr.response)

            } else {
                reject(Error('Whoops! something went wrong. Error: ' + xhr.statusText))
            }
        }
    })
    .done(() => {
        this.props.onLogin(this.state.email, this.state.password); // This works 
    })
}
  render() {

    return (
        <View style={{padding: 20}}>
            <Text style={{fontSize: 27}}>{this.state.route}</Text>
            <TextInput 
                placeholder='Email'
                autoCapitalize='none'
                autoCorrect={false} 
                keyboardType='email-address'
                value={this.state.email} 
                onChangeText={(value) => this.setState({ email: value })} />
            <TextInput 
                placeholder='Password'
                autoCapitalize='none'
                autoCorrect={false} 
                secureTextEntry={true} 
                value={this.state.password} 
                onChangeText={(value) => this.setState({ password: value })} />
            <View style={{margin: 7}}/>
            <Button onPress={(e) => this.handleClick(e)} title={this.state.route}/>
        </View>
    );
}
}

const mapStateToProps = state => {
  return { 
    isLoggedIn: state.auth.isLoggedIn,
    access_token: state.auth.access_token, 
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onLogin: (email, password) => { dispatch(login(email, password)); },
    tokenStore: (accessToken) => { dispatch(storeTokens(accessToken)) },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Redux Action :

export const login = (email, password) => {
  return {
    type: 'LOGIN',
    email: email,
    password: password
  };
};

export const logout = () => {
  return {
    type: 'LOGOUT'
  };
};

export const storeTokens = () => {
  return {
    type: 'STORE_TOKENS',
    access_token: accessToken,
  }
}

最后是 reducer :

const defaultState = {
  isLoggedIn: false,
  email: '',
  password: '',
  access_token: '',
};

export default function reducer(state = defaultState, action) {
  switch (action.type) {
    case 'LOGIN': 
        return Object.assign({}, state, { 
            isLoggedIn: true,
            email: action.email,
            password: action.password
        });
    case 'LOGOUT':
        return Object.assign({}, state, { 
            isLoggedIn: false,
            email: '',
            password: ''
        });
    case 'STORE_TOKENS':
        return Object.assign({}, state, {
            access_token: action.accessToken,
        })
    default:
        return state;
  }
}

我还尝试在 componentDidMount() 中将数据传递给 this.props.storeTokens(实际操作)，这给了我错误 undefined不是一个函数(评估'this.props.storeTokens()')componentDidMount Login.js:57:8

然后我的问题是:如何将从我的 XHR POST 获取的变量存储在 redux 存储中？为什么 this.props.tokenStore 和 this.props.storeToken 没有定义？

Answer 1

嘿，由于 javascript 概念，这是一个错误。你在打电话 this.props.tokenStore(this..state.accessToken)//这不起作用:“无法读取未定义的属性‘tokenStore’”

在使用 ES5 语法定义的函数中。要么将 this 的引用存储在函数外部的某个变量中，然后使用该变量代替 this。另一个选项是定义箭头函数。因此，将您的功能关键字更改为 () =>这应该有效。到目前为止，在您的实现中，这并没有指向您正在考虑的组件