CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-toolkit
Meet Bhalodiya
Meet Bhalodiya

Reputation: 906

How to get updated state from redux store inside a normal function in react component

I have been using react and redux toolkit recently. I just came across a strange issue.

I have a react component ChatUI inside of which there is a normal javascript function nextQue

nextQue Function
It has a post API call and the response is then dispatched to reducers to update the messages state.

I want the latest messages array inside mailTime function as I have to post them. Knowing that useSelector is synchronous and is does give me latest messages array. but, I am not able to get the latest messages inside mailTime function if I log the messages inside and outside the mailTime function I am getting the desired data outside the function but not inside the function

Here, is the code for a look (you don't have to answer based on the following code you can talk globally about what can be a solution to these kind of problems.)


const ChatUI = () => {
  const dispatch = useDispatch();
  const messages = useSelector((state) => state.msg.messages);
  const [loading, setLoading] = useState(true);

  const mailTime = () => {
    // const requestOptions = {
    //   method: "POST",
    //   headers: { "Content-Type": "application/json" },
    //   body: JSON.stringify({
    //     data: messages,
    //   }),
    // };

    // fetch(
    //   "https://api-url",
    //   requestOptions
    // )
    //   .then((res) => res.json())
    //   .then((data) => {
    //     console.log("datdat", data);
    //   });
    console.log("not latest", messages); //not getting the desired length
  };

 console.log("latest messages", messages); //getting the desired length

  const nextQue = (message) => {
    setLoading(true);
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: {details to be posted}
    };

    fetch(
      "https://api-url",
      requestOptions
    )
      .then((res) => res.json())
      .then((data) => {
        console.log("data...", data?.data[0]?.question);
        dispatch(
          msgActions.add({
            meta_value: data?.data[0]?.question,
            post_id: data?.data[0]?.id,
            type: "bot",
          })
        );
   
        if (!data?.data[0]?.id) {
          setTimeout(() => {
            setLoading(false);
            console.log("messa", messages);
            mailTime();
          }, 1000);
        }
      });
  };
return <></>
}

So I know what's happening over here but It would be great if I get response for any solution or hints. Please correct me if I am wrong anywhere.

Upvotes: 2

Views: 1560

Answers (1)

Levon Ghazaryan
Levon Ghazaryan

Reputation: 109

If you want to access to store directly from mailTime function you can achieve that using const store = useStore() inside your component and then inside mailTime function call store.getState() to access state but I don't think that it's a best solution.If you need to do some chained api request i will suggest you to move that part to middleware.

Upvotes: 2

Related Questions