React fetching data null pointer exception

Question

I'm learning react with redux and I want to achieve something like this:

When I go to this url:

some_url/posts/1

I want to fetch from my server some data and then show it on page.

However it throws null pointer exception because it takes some time to get data.

I did something like this but it doesnt looks well, what is the proper way to prevent this null pointer exception and wait untill data will arrive?

Inside my component:

 componentWillMount() {
 this.props.fetchPost( 
 parseInt(this.props.match.params.postId));
}

render(){
    return(
        <div>
            {post.title}
        </div>
    )};

My action creator:

export function fetchPost(postId){

const request = axios.get(`${ROOT_URL}/posts${postId}`);

return {
    type: FETCH_POST,
    payload: request
};
}

And reducer, here I just filled state with empty template of object which server is providing. Without this I got NullPointerException.

import { FETCH_POST } from "../actions";

export default function(state = {id: 0, title: "", infos: [{id: 0, content: "", authorId: 0}]}, action){
switch(action.type){
    case FETCH_POST:
        return action.payload;
  }

return state;
}

What is the proper way to wait until data will arrive?

Utsav Patel · Accepted Answer · 2019-02-21 16:38:01Z

1

Actions in redux should always return a plain JS object which should have a mandatory type property.

When you are executing async code in the action creator, the returned object is no longer a plain JS object.

If you have to use redux then you would have to use a middleware like redux-thunk.

https://github.com/reduxjs/redux-thunk

However, middlewares are advanced topic in react & redux.

If you just want to fetch some data from your api, you can do that in plain react. But for using redux flow, use a middleware. You can also do it without a middleware, but that is not the recommended approach.

edited Feb 21, 2019 at 16:38

answered Feb 21, 2019 at 16:31

Utsav Patel

2,9171 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nubinub · Accepted Answer · 2019-02-21 16:33:30Z

Axios is using Promise to handle http responses aynshcronously.

Promise based HTTP client for the browser and node.js

So when you return your request object, it is currently not resolved. I think you need to refactor a little bit your code with something looking like:

function fetchPost(postId) {
   return axios.get(`${ROOT_URL}/posts${postId}`);
}

// And your action creator
function updateContent(payload) {
   return {
      type: UPDATE_CONTENT,
      payload: payload,
   }
}

And call that in your component:

componentWillMount() {
 fetchPost(parseInt(this.props.match.params.postId)).then(this.props.updateContent);
}

By the way, there are plenty of ways to do this, I think you should read axios documentation and pick the one you prefer and the one matching your application requirements.

Collectives™ on Stack Overflow

React fetching data null pointer exception

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related