为什么（Flux）状态管理不使用静态函数而不是命名属性

Question

我目前正在决定从angularJS切换到react.js或vue.js。目标是使用包括Typescript的代码来确保所有内容都是Typesafe。

在试用vuex和redux时，我注意到它们不使用常规函数，而是对函数使用某种形式的字符串命名。

Redux例如通过减速器中的开关检查某些功能

Vuex使用常量对象，可以通过带有字符串和有效负载的函数来调用该对象中的函数

这是什么原因？在某种程度上，当您不得不进行重构时，这感觉会很痛苦，并且由于编程错误，感觉就像是在编程时出错的一种方式。

为什么带有静态函数的普通类不能完成这项工作（或另一个可能更好的解决方案）

Answer 1

Redux和Vuex都从声明的模块集中创建了一个store实例，该实例负责调度/提交需要将类型作为string值提供的注册动作/突变。在扩展应用程序时，操作/突变的使用变得相当普遍，并且使用纯字符串会大大降低状态突变的可预测性。

使用常量，例如：

export const ADD_PORTFOLIO = 'ADD_PORTFOLIO'

允许在单独的类似于列表的文件中列出所有可用的状态突变，从而提供对可能更改的清晰理解，同时避免存储模块内部出现错别字，并允许IDE和代码编辑器自动完成或突出显示对常量类型的无效引用。这减少了调试时间，并且对于普通string来说是不可能的。它不是必需的，也不是上述库的发明。出于相同的原因，它可以很好地与全局调用的事件（例如Node EvenEmitter，Electron ipcRenderer等）配合使用。

Redux和Vuex都将状态存储在普通对象中，并要求将它们的API定义为一个函数（每个都有其自己的体系结构），这些函数将合并到一个存储实例中。这用于提供状态更改的反应性更新，在状态发生突变之外的突变或未注册调度的操作/突变时发出警告的目的。我的观点是，这种方法在没有类型安全性的情况下是有效的，这两个库最初都打算在没有类型安全性的情况下使用。

例如，在Vuex中，如果您决定从另一个模块调用动作或突变，则可以将dispatch（对于动作）或commit（对于变异）使用类型称为完整路径的类型到模块：

dispatch('profile/addPortfolio', payload, { root: true })
commit('profile/ADD_PORTFOLIO', payload, { root: true })

意思是，这两个调用都应该使用store实例方法完成，并且应该在当前store实例上注册，而不是直接导入和调用模块的动作或变异。

如果将Typescript集成到项目中，则可以为商店及其模块使用基于类的结构或装饰器。再次，将编译类以匹配商店库体系结构，但是会增强开发经验。

对于Vuex，以下库值得与Typescript一起使用：

• vue-property-decorator
• vuex-module-decorators
• vuex-class-在组件内部使用vuex装饰器的助手

TLDR 此类库由上述库定义，可以在没有类型安全的情况下使用，同时仍允许进行反应性和集中状态更改。常数有助于确保在商店实例上注册动作/突变，提高可预测性并为代码编辑器提供自动完成功能。