将正则表达式保存到Redux store中?

4

如何将正则表达式保存到 Redux 存储中?

例子:

我有一个保存在对象中的正则表达式:

const regexes = {
   name: /^[a-zA-Z0-9_]*$/
}

将此对象保存到redux存储器后,正则表达式丢失(被解析为空对象)。
// Dispatch
dispatch(setRegexes(regexes))
// Redux Dev Tools:
{
   name: {}
}

即使作为负载被接收到 reducer 中,正则表达式也是可以的:

// Reducer
case 'SET_REGEXES':
   console.log(payload.regexes) // {name: /^[a-zA-Z0-9_]*$/}
   return {...store, regexes: payload.regexes}
break;

这意味着有效载荷很可能被转换为JSON格式,并且正则表达式将会丢失。
这个问题是否有解决方法?或者技术上即使将正则表达式保存到JavaScript对象中也是有效的,我也不应该将正则表达式保存到redux中?
编辑:我想实现这样一种情况,即我不需要使用new RegExp(store.regexes.name)。我想将实际的正则表达式保存到store中,因为store是JavaScript对象。

在这个背景下,这可能是一篇有趣的阅读 https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state - m90
3
是不是Redux Dev工具在对对象进行序列化?我怀疑RegExp对象已经被正确地存储在你的状态中。 - Jamie Dixon
@JamieDixon 你说得对! - Baterka
3个回答

1

根据我的评论,这似乎是一个Redux Dev Tools问题,而不是Redux本身的问题。

Dev Tools可能会在记录到控制台之前对数据进行序列化,但RegExp对象本身应该正确存储在您的状态中。

是否要在状态中存储非可序列化数据将基于您自己的上下文和要求。

根据Redux文档:

强烈建议您只将纯可序列化对象、数组和基元放入存储库中。技术上可以将不可序列化的项插入存储库,但这样做可能会破坏持久化和重新启动存储库内容的能力,并干扰时间旅行调试。

如果您可以接受像持久性和时间旅行调试等功能可能无法按预期工作的情况,则完全可以将不可序列化的项放入Redux存储库中。最终,这是您的应用程序,您如何实现它由您决定。与Redux的许多其他事情一样,只需确保您了解所涉及的权衡。

来源:https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state


0

你可以通过正则表达式的 source 属性先将其转换为字符串

case 'SET_REGEXES':
   const regexsrc = regexes.name.source;
   return {...store, regexes: {name: regexsrc}}
break;

如果regexes实际上是一个数组,则运行循环以转换每个属性。

然后只需使用new RegExp(str)进行检索。


我想达到这样的情况,即我不需要使用 new RegExp(store.regexes.name) - Baterka
1
但是为什么呢?你也可以将这个标准添加到你的问题中 @Baterka - Abana Clara

0

只需将正则表达式转换为字符串

// Reducer
case 'SET_REGEXES':
   console.log(payload.regexes) // {name: /^[a-zA-Z0-9_]*$/}
   return {...store, regexes: payload.regexes.name.toString()} // Convert to string
break;

const regexp1 = /^[a-zA-Z0-9_]*$/
console.log(regexp1.toString())


当然可以,但是接下来我需要将其转换回 new RegExp(store.regexes.name) - Baterka
是的,因为正则表达式是复杂类型。 - Medet Tleukabiluly

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接