无法使用react redux存储数据？-Java 学习之路

我创建了Login.js组件，有2个操作，一个是loginAction.js，第二个是logoutAction.js，另一个是userReducer.js我在控制台中将accessToken作为未定义 . 如何在单击登录按钮时将accessToken存储在asyncstorage中 . 注意：我正在使用redux thunk中间件 .

我已经实现了登录功能而没有使用redux和asyncstorage，即使用内部状态变量，请参阅下面的原始代码:(但我现在想用redux和asyncstorage实现它）

原始代码：

constructor(props) {
    super(props);
    this.state = { accessToken: null };
  }

  _onLogin = () => {
    auth0.webAuth
      .authorize({
        scope: 'openid profile',
        audience: 'https://' + credentials.domain + '/userinfo'
      })
      .then(credentials => {
        Alert.alert(
          'Success',
          'AccessToken: ' + credentials.accessToken,
          [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
          { cancelable: false }
        );
        this.setState({ accessToken: credentials.accessToken });
      })
      .catch(error => console.log(error));
  };

import React, { Component } from 'react';
    import { Button, StyleSheet, Text, View } from 'react-native';
    import { connect } from 'react-redux';
    import { loginUser } from '../actions/loginAction';
    import { logoutUser } from '../actions/logoutAction';

    class Login extends Component {

      render() {

        console.log(this.props)

        return (
          <View style={styles.container}>
            <Button
            onPress={loginUser}
            title="Click to Login"
            ></Button>
          </View>
        );
      }
    }

const mapStateToProps = state => ({
  accessToken: state.accessToken
})

export default connect (mapStateToProps, { loginUser })(Login);

loginAction.js：

import { LOGIN_USER } from './types';
import Auth0 from 'react-native-auth0';
import { AsyncStorage } from 'react-native';

var credentials = require('./auth0-credentials');
const auth0 = new Auth0(credentials);

export const loginUser = () => dispatch => {
    auth0.webAuth
    .authorize({
      scope: 'openid profile',
      audience: 'https://' + credentials.domain + '/userinfo'
    })
    .then(credentials =>

        _storeData = async () => {
            try {
                await AsyncStorage.setItem('accessToken', credentials.accessToken);
            } catch (error) {
                console.log(error)
            }
        },

        dispatch({
            type: LOGIN_USER,
            payload: credentials.accessToken
        })
    )
    .catch(error => console.log(error));
}

userReducer.js：

import { LOGIN_USER } from '../actions/types';

const initialState = {
    accessToken: null
}

export default function (state = initialState, action) {
    switch (action.type) {

        case LOGIN_USER:

            return {
               ...state,
               accessToken:action.payload
            };

        default:
            return state;
    }
}

将原始代码转换为actions和reducer，但accessToken未定义 .

1 回答

从你发布的代码中你不想明白你想要做什么（至少对我而言），但我会尝试提出一个解决方案 .

首先，您永远不会调用 _storeData 函数，这意味着不存储令牌 .

import React, { Component } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { connect } from 'react-redux';
import { loginUser } from '../actions/loginAction';
import { logoutUser } from '../actions/logoutAction';

    class Login extends Component {

      // Monitor props changes
      componentDidUpdate(prevProps){
          // Token was changed
          if(prevProps.accessToken !== this.props.accessToken){
             if(this.props.accessToken){
                 Alert.alert(
                   'Success',
                   'AccessToken: ' + credentials.accessToken,
                   [{ text: 'OK', onPress: () => console.log('OK Pressed') 
                   }],
                   { cancelable: false }
                 );
                 this.setState({ accessToken: credentials.accessToken });
             }
          }
      }

      render() {

        console.log(this.props)

        return (
          <View style={styles.container}>
            <Button
            onPress={loginUser}
            title="Click to Login"
            ></Button>
          </View>
        );
      }
    }

const mapStateToProps = state => ({
  accessToken: state.accessToken
})

export default connect (mapStateToProps, { loginUser, logoutUser })(Login);

loginAction.js：

import { LOGIN_USER } from './types';
import Auth0 from 'react-native-auth0';
import { AsyncStorage } from 'react-native';

var credentials = require('./auth0-credentials');
const auth0 = new Auth0(credentials);

export const loginUser = () => dispatch => {
    auth0.webAuth
    .authorize({
      scope: 'openid profile',
      audience: 'https://' + credentials.domain + '/userinfo'
    })
    .then(credentials =>

        _storeData = async () => {
            try {
                await AsyncStorage.setItem('accessToken', credentials.accessToken);
            } catch (error) {
                console.log(error)
            }
        };
        // Call the function to store the token
        _storeData();

        dispatch({
            type: LOGIN_USER,
            payload: credentials.accessToken
        })
    )
    .catch(error => console.log(error));
}

回复于 2024-04-29T16:28:45+08:00

无法使用react redux存储数据？

1 回答

相关问题