Confused with this async thunk

Question

export const loginSuccess = createAsyncThunk(
  "auth/loginSuccess",
  async (user: User) => {
    const res = await api
      .post(
        "/auth/loginSuccess",
        { user },
        {
          withCredentials: true,
        }
      )
      .then((res: any) => {
        setAxiosToken(res.data.token);
        saveToken(res.data.token);
        return { ...res.data.data, token: res.data.token };
      });

    return res;
  }
);

There are 2 return statements at the end so I am confused about which return value the fulfilled reducer will get. The code is written by someone else that's why I want to understand it.

Answer 1

The second return statement is the one which will return from your function.

The first is actually returning from the then function of the promise that axios returns.

This is made a little bit confusing by using the same name for the res variable in the thunk function, and for the response variable that is passed to the then function.

But what you will receive back is the object generated in this line of code:

{ ...res.data.data, token: res.data.token }

Where res.data.data is spread into a new object, and res.data.token is assigned to the token property of that object.