How do I pass a response data I am getting back from createasyncthunk in redux toolkit to a component ?

Question

0.00/5 (No votes)

See more:

, +

This might sound like a noob question but I need some help here:

```

export const loginUser = createAsyncThunk(
    'users/login',
    async ({ email, password }, thunkAPI) => {
      try {
        const response = await fetch(
          'my_url',
          {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              email,
              password,
            }),
          }
        );
        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) {
        console.log('Error', e.response.data);
        thunkAPI.rejectWithValue(e.response.data);
      }
      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

loginUser

to my component. But I don't know where to go from there or whether I am doing it the right way.

Posted 14-Feb-23 21:30pm

geomukkath

Updated 14-Feb-23 23:07pm

Andre Oosthuizen

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Andre Oosthuizen · Answer 1 · 2023-02-14T23:07:00

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 (
    <div>
       <Parent />
    </div>
  );
}

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) => {
    setMessage(message);
  };
  return (
    <div>
      <h1>{message}</h1>
      <Child chooseMessage={chooseMessage} />
    </div>
  );
};
const Child = ({ chooseMessage }) => {
  let msg = 'Goodbye';
  return (
    <div>
      <button onClick={() => chooseMessage(msg)}>Change    Message</button>
    </div>
  );
};

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.