将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;

因此，显然不会那么简单，我将不得不更改一些事情，但是想法是创建此函数，以将所有组件的状态与本地存储同步，因此，我不必在此情况下再次编写此逻辑建立一个新的组件。

到目前为止，我还没有想出什么好主意……我一直在研究mixin或创建一个HOC，使我所有的组件都可以扩展，但这是一个好方法吗？

谢谢！

Answer 1

如果您要保存整个应用程序的状态，则建议使用redux 。 然后，只要您的状态发生更改（或存储在redux中），就可以对其进行字符串化并将其保存到localStorage。