Easy-peasy: how to use axios in api-service?

Created on 19 Mar 2019 · 8Comments · Source: ctrlplusb/easy-peasy

hi,
sorry for the question, but how can I put my crud operations using axios in api-services from your example?
I tryed for GET:

fetchCategories: () => {
        var self = this;
        console.log(`GET ${CONFIG.serverUrl}categories`);
        axios.defaults.headers.common['Authorization'] = 'JWT ...';
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        axios.get(`${CONFIG.serverUrl}categories`)
        .then(response => response.data)
        .then(json => json.forEach(element => categories.push(element)))
       .catch(error=> console.log(`error ${error} categories`) ); 
        return Promise.resolve(categories)
}

but categories don't get updated...
And for POST, PUT, DELETE?
Thank you for your help

Source

brucelane

Most helpful comment

Yep so in your case you would want something like this:

const store = createStore({
  categories: {
    items: [],
    fetched: action((state, payload) => {
      state.items = payload;
    }),
    fetch: thunk((actions) => {
      return axios.get('/categories')
        .then(response => response.data)
        .then(json => actions.fetched(json));
    });
  }

You then dispatch the thunk which returns the axios promise (you can use async/await instead if you like). The promise gets resolved and then calls the fetched action, which updates the state. 👍

ctrlplusb on 22 Mar 2019

👍3 🎉2

All 8 comments

Hey @brucelane,

I am not entirely sure what you are asking for here sorry.

Are you trying to understand how to use Axios? If so I think the better place to be would be Stackoverflow. Apologies, but I would rather keep this issue list specific to issues regarding Easy Peasy.

ctrlplusb on 21 Mar 2019

hi, I use axios in other projects, but I don't understand how to use it in the easy-peasy context, I'm missing something...
anyway, you can close this if you want, I'm sorry

brucelane on 21 Mar 2019

Ok, you definitely want to fire them within thunk actions. I would recommend reading the documentation for them. 👍

Let me know if it isn't clear for you after that.

ctrlplusb on 21 Mar 2019

something like redux-thunk I guess... I need to study all this...
an fetch example would be nice but I think I can find it somewhere.
thank you

brucelane on 22 Mar 2019

Yep so in your case you would want something like this:

const store = createStore({
  categories: {
    items: [],
    fetched: action((state, payload) => {
      state.items = payload;
    }),
    fetch: thunk((actions) => {
      return axios.get('/categories')
        .then(response => response.data)
        .then(json => actions.fetched(json));
    });
  }

You then dispatch the thunk which returns the axios promise (you can use async/await instead if you like). The promise gets resolved and then calls the fetched action, which updates the state. 👍

ctrlplusb on 22 Mar 2019

👍3 🎉2

fantastic, thank you very much!

brucelane on 22 Mar 2019

@ctrlplusb hi Sean, would the above return the response of the axios promise to the call of the thunk as well as updating the state?

Would I be able to get the response in my react component like this:

fetch().then(res => { console.log(res) }

or would I need to have a useEffect to watch the state and that way wait for the state to be updated?