React.component状態をローカルストレージと同期する

Question

コンポーネントが存在する場合（以前に保存されていた場合）、ローカルストレージからコンポーネントの状態を取得する機能を作成しようとしています。さらに重要なこと

// my util function 
    myFunction = (componentUniqueIdentifier, componentState) => { 

    // for all the keys found in componentState, try to find in local storage if localStorage[componentUniqueIdentifier][key] exists. if it exists, override value. 


if(localStorage.getItem(key)) { componentState[key] = localStorage.getItem(key); } 

return componentState; 

    } 

と：それは次のように、すべてのコンポーネントで使用することができ機能、ものになるだろう、それは文句を言わない、単純なことも

import React, { Component } from 'react'; 

class Test extends Component { 

    state = { 
     thisIsAKey: '' 
    } 

    render() { 

     console.log(this.state.thisIsAKey); // this shows value coming from local storage if found 

     return (
      <div></div> 
     ); 
    } 

} 

export default Test; 

ので、明らかにし、私がちゃったごめんなさいを変更する必要がありますいくつかのことが考えられますが、すべてのコンポーネントの状態をローカルストレージと同期させるこの関数を作成することが考えられるので、新しいコンポーネントを作成するときにこのロジックを書き直す必要はありません。

これまでのところ、いいアイデアを思いついたことはありません...私はmixinsを探していましたが、すべてのコンポーネントが拡張するHOCを作成しましたが、それは良い方法ですか？

ありがとうございます！

Answer 1

アプリケーション全体の状態を保存する場合は、reduxを使用することをおすすめします。その後、状態が変わるたびに（またはreduxに格納する）、それを文字列化してlocalStorageに保存することができます。