无法使用 react redux 存储数据？

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

登录.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;
    }
}

将原始代码转换为 action 和 reducer，但 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));
}