React/Redux中使用aws-amplify的currentSession()仍返回Promise问题

Hey there, let's break down why you're getting a Promise instead of the actual CognitoUserSession in your component props, and fix it!

The Core Issue #

mapStateToProps is a synchronous function—it runs immediately when your component connects to Redux, and it can't wait for async operations (like the Promise returned by AWS Amplify's Auth methods) to resolve. That's why you're seeing Promise {<resolved>: CognitoUserSession} instead of the session data itself.

The Fix: Move Async Logic Out of mapStateToProps #

We need to fetch the session data first, save it to your Redux store, then map that stored value to your component props. Here's how to do it step by step:

1. Set Up Redux Actions & Reducer

First, create actions and a reducer to handle storing the session data:

// authActions.js
export const SET_USER_SESSION = 'SET_USER_SESSION';
export const setUserSession = (session) => ({
  type: SET_USER_SESSION,
  payload: session
});

// authReducer.js
import { SET_USER_SESSION } from './authActions';

const initialState = {
  userSession: null
};

export const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_USER_SESSION:
      return { ...state, userSession: action.payload };
    default:
      return state;
  }
};

Don't forget to add this reducer to your Redux store configuration!

2. Fetch Session & Update Store in Your Component

Use a component lifecycle method (class components) or useEffect (function components) to fetch the session and dispatch it to the store:

For Function Components:

import { connect } from 'react-redux';
import LoginForm from './LoginForm';
import { Auth } from 'aws-amplify';
import { setUserSession } from './authActions';
import { useEffect } from 'react';

const LoginContainer = ({ userSession, setUserSession }) => {
  useEffect(() => {
    const fetchUserSession = async () => {
      try {
        // Resolve the Promise to get the actual session
        const session = await Auth.currentSession();
        // Save session to Redux store
        setUserSession(session);
      } catch (err) {
        console.error('Failed to fetch user session:', err);
      }
    };

    fetchUserSession();
  }, [setUserSession]);

  return <LoginForm userSession={userSession} />;
};

// Now map the stored session from Redux to props
const mapStateToProps = (state) => ({
  userSession: state.auth.userSession
});

const mapDispatchToProps = {
  setUserSession
};

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

For Class Components:

import { connect } from 'react-redux';
import LoginForm from './LoginForm';
import { Auth } from 'aws-amplify';
import { setUserSession } from './authActions';
import React from 'react';

class LoginContainer extends React.Component {
  componentDidMount() {
    Auth.currentSession()
      .then(session => {
        this.props.setUserSession(session);
      })
      .catch(err => {
        console.error('Failed to fetch user session:', err);
      });
  }

  render() {
    return <LoginForm userSession={this.props.userSession} />;
  }
}

const mapStateToProps = (state) => ({
  userSession: state.auth.userSession
});

const mapDispatchToProps = {
  setUserSession
};

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

Why This Works #

• We handle the async session fetch outside of mapStateToProps, where we can properly wait for the Promise to resolve.
• Once we have the actual CognitoUserSession, we dispatch it to the Redux store.
• mapStateToProps then pulls the resolved session data from the store and passes it to your component as a regular prop—no more Promise objects!

内容的提问来源于stack exchange，提问作者DocCaliban