Click here to Skip to main content
15,797,961 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
This might sound like a noob question but I need some help here:

export const loginUser = createAsyncThunk(
    async ({ email, password }, thunkAPI) => {
      try {
        const response = await fetch(
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            body: JSON.stringify({
        let login_response = await response.json();
        console.log('response login', login_response);
        if (response.status === 200) {
            console.log('success from here')
        //   localStorage.setItem('token', data.token);
          return login_response;
        } else {
          return thunkAPI.rejectWithValue(data);
      } catch (e) {
      return login_response;


This is my login function that I have defined under features/userSlice.
The problem is that I have to send the response I get. In my case login_response back to a component.
How do I do that ?

What I have tried:

I have tried using the usual JS method of importing
to my component. But I don't know where to go from there or whether I am doing it the right way.
Updated 15-Feb-23 0:07am

1 solution

These might help -

How to Pass Data and Events Between Components in React[^]

Using Context to pass data[^]

How to Pass Data from Child to Parent in React[^]

a Snippet from the last link -
While there is no direct way to pass data from the child to the parent component, there are workarounds. The most common one is to pass a handler function from the parent to the child component that accepts an argument which is the data from the child component.

an Example -
import React from "react";
export default function App() {
  return (
       <Parent />

Consider a simple application with the App component shown above. It returns a Parent component within a div element. Let’s look at the Parent and Child components.

const Parent = () => {
  const [message, setMessage] = React.useState("Hello World");
  const chooseMessage = (message) => {
  return (
      <Child chooseMessage={chooseMessage} />
const Child = ({ chooseMessage }) => {
  let msg = 'Goodbye';
  return (
      <button onClick={() => chooseMessage(msg)}>Change    Message</button>

The initial state of the message variable in the Parent component is set to ‘Hello World’ and it is displayed within the h1 tags in the Parent component as shown. We write a chooseMessage function in the Parent component and pass this function as a prop to the Child component. This function takes an argument message. But data for this message argument is passed from within the Child component as shown. So, on click of the Change Message button, msg = ‘Goodbye’ will now be passed to the chooseMessage handler function in the Parent component and the new value of message in the Parent component will now be ‘Goodbye’. This way, data from the child component(data in the variable msg in Child component) is passed to the parent component.
Share this answer
geomukkath 15-Feb-23 22:40pm    
Thank-you for your answer, however I a using Redux-toolkit and the process here is different. loginUser returns an action Creator. I am searching all over the internet and I am not getting a solution which I am able to understand.
Andre Oosthuizen 16-Feb-23 2:18am    
You're welcome.

As per your post, ReactJS were selected hence the answer above.
After some searching, this might help -
Using Redux Data[^]
Async Logic and Data Fetching[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900