I want to use axios's return to global state ,but Promise { <pending> }

Question

const Board = () => {

    ...

    const {selected} = useSelector(state => state.board);
    // In Redux reducer ->
    // const initialState = {
    // selected : {}
    // }

    const getOnePost = async (id) => {
        try {
          const response = await axios.get(`/api/v1/post/${id}`);
          const getOnePostData = await response.data;
          selected = getOnePostData //I want to use Redux to use global state...
          console.log(selected) //TypeError... and How to use global state..?
        } catch(error) {
          alert(error.response.data.message);
          return Promise.reject(error)
        }
      }

    const postClickHandler = (postId) =>
    {
        if(postId) {
            // dispatch(boardSelected(postId));
            getOnePost(postId)
        }
    }

    ...

}

This code uses axios.get to receive post information.

and I want to use api's return to global state(Redux state).

    const getOnePost = async (id) => {
        try {
          const response = await axios.get(`/api/v1/post/${id}`);
          const getOnePostData = await response.data;
          return getOnePostData //return data
        } catch(error) {
          alert(error.response.data.message);
          return Promise.reject(error)
        }
      }

    const postClickHandler = (postId) =>
    {
        if(postId) {
            getOnePost(postId).then((response)=>{
                return{...selected, selected: response} //But Seleted: {}
            })
        }
    }

Answer 1

Axios is a Promised-based JavaScript library that is used to send HTTP requests, you have to get the promise result in the then method . try this

const Board = () => {
...

const {selected} = useSelector(state => state.board);
// In Redux reducer ->
// const initialState = {
// selected : {}
// }

const getOnePost = async (id) => {
    try {
      const response = await axios.get(`/api/v1/post/${id}`);
      response.then(function (rec) {
            selected = rec.data //
            //here update you state 
            console.log(selected)
        }).catch(function (error) {
            console.log(error);
        }); 
    } catch(error) {
      alert(error.response.data.message);
      return Promise.reject(error)
    }
  }

const postClickHandler = (postId) =>
{
    if(postId) {
        // dispatch(boardSelected(postId));
        getOnePost(postId)
    }
}

...

}

Answer 2

You can handle promise by using .then()

Try to initialize selected like below :

const response = await axios.get(`/api/v1/post/${id}`).then( response => {
 selected = response
})

I don't know what kind of data is it. So, try to log response data, and use it.