如果尚未存储，如何从服务器获取数据

Question

I have a route in my React application that I can enter from two different directions with different implications.

On my Homepage of the app, I have a list of blog posts. If I click a link to a particular blog post (the first way of entering this route), the BlogPost component can get the blog post data from the BlogPostStore via an id that was populated when the HomePage loaded (and loaded all the blog posts into the store). However, I can also enter that same route from the admin page of the blog (which isn't a React app) and thereby bypass the HomePage, which means the blog post is not in the store. In fact, the store is empty if I enter the route that way.

If I enter the route the first way, the store can return the blog post without a problem like this, by simply returning the post

 getPost: function(id){
    return _posts[id];
 }

However, if to account for the second way of entering the route where the store isn't populated, I need to do something like this, [which has obvious problems] created by using a return statement with an ajax request 1

 getPost: function(id){
    if (!_posts[id]){
      /// ajax request
    }
    return _posts[id];
 }

Question: How can I restructure the getPost function of the BlogStore to return an post when it's in the store, but then fall back to an ajax request when it's not in the store?

Note, I do not consider this a duplicate of the question I linked to because in my question, I am first trying to retrieve an item from a store (which necessitates returning it), before falling back to an ajax request if the store isn't populated.

Code:

BlogPost component

    getInitialState(){
         return this.getStateFromStore()

    },
    getStateFromStore(props){
        return {
            post:  BlogStore.getPost(id)
         }
    },
    render: function(){
        return (
             <div> {post.title} </div>
         )
    }

The BlogStore

     _posts = {}
     init(){
        getJSON(API, function(err, res){
             res.forEach(function(post){
              _posts[post.id] = post;
             }
        }
     }
     getPosts: function(){ 
     },
     getPost: function(id){
        return _posts[id];
     }


function getJSON(url, cb){
    var req = new XMLHTTPRequest()
    req.onload = function(){
        if(req.status === 404){
           cb(new Error('not found');
         }else{
           cb(null, JSON.parse(req.response);
         }
    }
    req.open('GET', url)
    req.setRequestHeader('authorization', localStorage.token)
    req.send()
}

Answer 1

Note that this.emit('gotPosts') would be in whatever flavor your store supports.

 The BlogStore _posts = {} init(){ this.getPosts(); } getPosts: function(){ getJSON(API, function(err, res){ res.forEach(function(post){ _posts[post.id] = post; } this.emit('gotPosts'); } }, getPost: function(id){ var returnPost = _posts[id]; if (returnPost == null) this.getPosts(); return returnPost; } function getJSON(url, cb){ var req = new XMLHTTPRequest() req.onload = function(){ if(req.status === 404){ cb(new Error('not found'); }else{ cb(null, JSON.parse(req.response); } } req.open('GET', url) req.setRequestHeader('authorization', localStorage.token) req.send() }