为什么使用 redux 而不是会话存储

Question

假设我的组件“App”状态中有一个小对象。那么要在 redux 中保存状态，为什么我不能将其保存在会话存储中呢？这有什么实质性的区别吗？

Answer 1

你可以这样做。

不同的是，

React足够聪明，可以DOM在您使用state和更新stateusing时更新您的setState。当您setState在 React 应用程序中使用时，它只是重新渲染您的组件，如果您在组件中使用该状态值来显示一些值/数据，这些值/数据会在您的组件上更新。

当您在其中存储数据时，sessionStorage您的应用程序不会reacts自动更改sessionStorage值。在这种情况下，您的组件将不会重新渲染，并且您的更改不会在您的组件上更新。但是对于这种情况，您有一个名为forceUpdate()

从文档中，

调用 forceUpdate() 将导致在组件上调用 render()，跳过 shouldComponentUpdate()。这将触发子组件的正常生命周期方法，包括每个子组件的 shouldComponentUpdate() 方法。如果标记发生变化，React 仍然只会更新 DOM。

虽然你有forceUpdate，通常你应该尽量避免的所有使用forceUpdate()和只读this.props，并this.state在render()。

Answer 2

浏览器存储仅允许与字符串值关联的键，没有什么复杂的，因此简单地从本地/会话中获取不同类型的数据所需的代码本身就很糟糕。

Redux 的“存储状态”部分确实是最无趣的部分。Redux 的重要部分是使用操作和化简器的模式，并且组件可以订阅这些状态更改，这样，如果化简器更新状态，使用该状态的组件将自动重新渲染。使用浏览器存储技术实际上只能解决“状态位于哪里”部分。您仍然需要更新该状态并让组件知道在状态更新时重新渲染的机制

会话存储也可能为零，例如，仅在 Safari（包括 iOS 上）中使用隐私浏览模式会将存储配额设置为零

还处理 React 应用程序的 localStorage 和 sessionStorage，将其视为有点像状态。它是代码库中最容易出错、最不可预测、最令人头疼的代码。

如果您仍然想使用它们，您还可以使用 redux-locastorage将存储保存到本地存储或 redux-sessionstorage将存储保存到会话存储