Meteorのクライアント側の永続的なローカルデータ

Question

Meteor + Reactで作業しています。 質問は約正しい方法永続的なデータをローカルにクライアントに格納する。

のは、私は5つの記事のリストを持つコンポーネントListを持っているとしましょう：

export default class List extends Component { 
    render() { 
    return(
     <ul> 
     <li><a href='/article1'>Article 1</li> 
     <li><a href='/article2'>Article 2</li> 
     <li><a href='/article3'>Article 3</li> 
     <li><a href='/article4'>Article 4</li> 
     <li><a href='/article5'>Article 5</li> 
     </ul> 
    ); 
    } 
} 

その後Articleコンポーネントが/articleNのようなルートのためにレンダリングされるべきであること、のは言わせて。

export default class Article extends Component { 
    render() { 
    return(
     <main> 
     .. 
     </main> 
    ); 
    } 
} 

私の目標は、すでに訪問した記事のリストをcontaines VisitedListコンポーネントを構築することです。

私のソリューションは、persistent-sessionパッケージ（link）を使用しています。 persistent-minimongoのようないくつかのパッケージがありますが、私は安定した解決策が必要です。 u2622:persistent-sessionの27kを超えるダウンロードで私はかなり安定していると思った。しかし、再び - 私は確かに分かりません。今私の解決策について。

ComponentDidMountのArticleコンポーネントでは、配列要素のような永続セッション変数を使用しています。私に説明させてください。まず、keyhistoryLengthの変数Sessionが存在するかどうかを確認します。そうでない場合（ユーザーが記事ページを最初に訪れたことを意味します）、historyLengthという新しい永続変数を設定し、0になります。この変数を使用して、履歴selfmade "配列"の長さを保存します。

次に、現在の記事が履歴にあるかどうかを確認し、そうでない場合は履歴に追加します。実際に履歴に追加すると、keyhistoryNという新しい永続変数が設定されます。ここでは、N = historyLengthです。

コードを単語で説明しようとするよりも、コードを見る方が簡単です。

だからArticleコンポーネントのコード：

export default class Article extends Component { 
    componentDidMount() { 
      if (Session.get('historyLength')) { 
       console.log('history exists'); 
      } else { 
       Session.setPersistent('historyLength', 0); 
       console.log('first history init'); 
      } 

      var articleInHistory = false; 

      for(i = 0; i < Session.get('historyLength'); i++) { 
       var key = 'history' + i; 
       if(Session.equals(key, this.props.articleName)) { 
        articleInHistory = true; 
        console.log('already in history:', i); 
       } else { 
        console.log(i, 'product is not in history'); 
       } 
      } 
      if(!articleInHistory) { 
       var newHistoryKey = 'history' + (Session.get('historyLength')); 
       Session.setPersistent(newHistoryKey, this.props.articleName); 

       var curHistoryLength = Session.get('historyLength'); 
       Session.setPersistent('historyLength', curHistoryLength + 1); 
      } 
    } 
    render() { 
    return(
     <main> 
     .. 
     </main> 
    ); 
    } 
} 

このコードは正しく動作します。私は、任意のコンポーネントでSession.get('historyLength')にアクセスして、forループを訪問した記事の名前を取得することができます：

for(i = 0; i < Session.get(historyLength); i++) { 
    let key = "history" + i; 
    console.log(key, Session.get(key)); 
} 

は最後にVisitedListコンポーネント：

export default class VisitedList extends Component { 
    renderVisited() { 
    var visitedArticles = []; 
    for(i = 0; i < Session.get(historyLength); i++) { 
     let key = "history" + i; 
     visitedArticles.push(Session.get(key)); 
    } 

    return visistedArticles.map((each) => { 
     return <li> {each} </li> 
    } 
    } 
    render() { 
    return(
     <ul> 
     { this.renderVisited() } 
     </ul> 
    ); 
    } 
} 

私の質問は：保存するは私のソリューションであり、正しい方法とローカル永続データを使用しますか？この例は単純で実際のプロジェクトからではありませんが、問題とその解決方法を示しています。

私はこのような履歴ブロックを自分のプロジェクトとショッピングカートに組み込みます。だから、この問題を解決するために、より効率的で、迅速かつ適切な方法があれば、私はそれを知りたければ、始める前に知りたい。あなたの答えをありがとう！

Answer 1

Meteor Session最近では、グローバルな名前空間を汚染しているため、その内容を把握して清潔に保つのが難しい場合があります。 u2622:persistent-sessionはMeteorのSessionオブジェクトと連動しているため、これが最も将来の証明のオプションとは思われません。反応を使用しているので、代わりにクライアント側の状態管理にreduxを使用すると考えましたか？ Reduxは、javascript/react空間で最も一般的なアプリケーション状態のコンテナになりつつあります（まだない場合）。 Redux自体は永続的ではありませんが、redux-persistなどの永続性機能を提供するアドオンライブラリがいくつかあります。