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

Question

我的 React 应用程序中有一条路线，我可以从两个不同的方向进入，具有不同的含义。

在我的应用程序主页上，我有一个博客列表 post。如果我点击一个 link 到一个特定的博客 post （进入这条路线的第一种方式），BlogPost 组件可以通过填充的 id 从 BlogPostStore 获取博客 post 数据当主页加载时（并将所有博客 post 加载到商店中）。但是，我也可以从博客的管理页面（不是 React 应用程序）输入相同的路由，从而绕过主页，这意味着博客 post 不在商店中。事实上，如果我从那里进入路线，商店是空的。

如果我以第一种方式进入路线，商店可以 return 博客 post 而不会出现这样的问题，只需 returning post

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

但是，如果考虑第二种进入未填充商店的路线的方式，我需要做这样的事情，[有明显的问题] 通过使用 return 语句创建ajax 请求1

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

问题： 如何将 BlogStore 的 getPost 函数重构为 return 和 post 当它在商店中时，然后又返回到ajax 商品不在商店时的请求？

请注意，我不认为这是我 link 提出的问题的重复，因为在我的问题中，我首先尝试从商店取回商品（这需要 returning它），如果商店未填充，则在回退到 ajax 请求之前。

代码：

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

请注意，this.emit('gotPosts') 可以是您商店支持的任何口味。

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()
}

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

how to get data from server if not already in store

javascript

reactjs

react-router