是否可以使用localStorage代替Redux或Context API?

h6my8fg2  于 2022-11-12  发布在  其他
关注(0)|答案(7)|浏览(172)

我使用React已经有一段时间了,一段时间后,我开始问自己,为什么不把组件需要共享的每一段数据都存储在本地存储中,而不是使用Redux。Redux需要很多样板文件,而本地存储是如此简单。你可以说你不能在本地存储中存储对象,但你可以用JSON.stringfy将它们存储起来。在恢复时,只需将它们解析回来。所以问题是,我无法正确地理解这一点,因为Redux被大量使用,而本地存储通常只是用来保存您不希望在刷新时丢失的数据等。

z31licg0

z31licg01#

当我开始开发react应用的时候,这个问题就在我的脑海里。有很多原因比下面的使用redux超过localStorage。但至少
1.与react-redux一起使用Redux不仅仅是为了存储数据。不要忘记,改变一个状态将重新呈现所有监听该状态的组件。这正是react-redux所做的。

  1. localStorage中的stringify/parse会使您的应用(在高规模上)变慢,并且在更改状态时不会同步所有组件。
    个人推荐经过4年以上的React应用开发,使用REDUX和Redux-toolkit或rematch等简单的API
puruo6ea

puruo6ea2#

Redux和localStorage实际上有不同的用例。Redux将用于跨多个组件管理应用程序状态。
本地存储,用于在浏览器中保存属性以供以后使用。问题是localStorage上的任何更改都不会反映到应用程序上。您必须手动执行此操作。

oo7oh9g9

oo7oh9g93#

react-redux的目的是允许其他组件连接到state,然后对更改做出React。您正在失去使用react-redux/context api的整个范围。

tct7dpnv

tct7dpnv4#

答案就在你的问题中,是的,本地存储只用于存储浏览器中的数据,而redux和context API解决了一些不同的问题。它将数据层从视图中分离出来,以便轻松地管理数据状态。如果应用程序不是很大,那么你应该考虑使用Context API。你可以阅读article了解更多信息。注意,字符串化和解析本身对于较大的数据集来说是相当繁重的操作。

uhry853o

uhry853o5#

使用本地存储而不是Redux可能是可以的。本地存储中的更改可能会立即影响订阅的React组件。
marmelab的开发人员从redux过渡到了他们所谓的The Store
React-admin包含一个全局的、同步的、持久性的存储,用于存储用户首选项。可以将该存储看作一个在页面加载之间持久存在的键-值数据库。
存储区使用浏览器本地存储区(如果localStorage不可用,则使用内存存储区)。当用户注销时,存储区将被清空。
当使用react-admin时,在本地存储中的更改会立即影响订阅的react组件。请检查readme并尝试演示。手动修改本地存储中的数据,看看react组件是如何重新渲染的。当我第一次看到时,我感到很惊讶。

pcww981p

pcww981p6#

我觉得没关系。这取决于你的要求。在我们的情况下,我们需要把一个大项目拆分成几个小项目,无论是使用Redux还是Mobx都很难解决问题,所以我们完全删除了Redux和Mobx,只使用LocalStorage来保存所有状态。我们知道它会很慢,而且当状态改变时无法重新渲染,但我们想接受它,甚至在需要从本地存储获取状态时在某个页面上添加一个Refresh按钮。完全删除Redux是可以,只是看看您是否愿意接受它。

cnjp1d6j

cnjp1d6j7#

为什么使用Redux而不是localStorage:

1.磁盘空间:您可能不会在每次用户退出您的网站时从本地存储中删除数据。(您可以使用onbeforeonunload事件enter link description here,但这看起来不是一个好的做法)。
1.安全性:如果您正在保存用户数据,则必须小心,不要将保存在localStorage上的用户数据混合在一起。

为什么不使用Redux而不是localStorage:

1.“更新状态”:事实是你可以监听localStorage上的变化,然后改变状态。所以,我认为,这不是一个很好的理由。例如:
如果您有任何问题,请联系我们。
1.简洁性:作为Zhang Buzz,还原可能是一种痛苦。
每种情况都是不同的,你需要权衡利弊,做出一个好的决定。

相关问题