Не в состоянии хранить данные, используя реагировать на избыточность?

Question

Я создал компонент 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));
  };

Login.js:

    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;
    }
}

Преобразован исходный код в действия и редуктор, но accessToken не определен.

Answer 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));
}