reactjs - 为什么(Flux)状态管理不使用静态函数而不是命名属性

Question

我目前正在决定是从 angularJS 切换到 react.js 还是 vue.js。目标是使用它，包括 Typescript 以确保一切都是类型安全的。

通过试用 vuex 和 redux，我注意到它们不使用普通函数，而是使用某种形式的字符串命名函数。

例如，Redux 通过 reducer 中的开关检查某个功能

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

这是什么原因？不知何故，当您必须重构时，这感觉会很痛苦，而且感觉就像是在编程时由于打字错误而犯错误的一种方式。

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

Answer 1

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

使用常量，例如:

export const ADD_PORTFOLIO = 'ADD_PORTFOLIO'

允许在一个单独的类似列表的文件中列出所有可用的状态突变，从而提供对可能变化的清晰理解，同时避免存储模块内的拼写错误，并允许 IDE 和代码编辑器自动完成或突出显示对常量类型的无效引用。这减少了调试时间，并且使用普通 string 是不可能的秒。它不是必需的，也不是上述库的发明。出于同样的原因，它适用于全局调用的事件(例如 Node EvenEmitter、Electron ipcRenderer 等)。

Redux 和 Vuex 都将状态存储在普通对象中，并要求将它们的 API 定义为一个函数(每个函数都有自己的架构)，这些函数将合并到一个存储实例中。这用于提供状态更改的 react 性更新，当状态在突变之外发生突变或未注册分派(dispatch)的 Action /突变时发出警告。我的观点是，这种方法在没有类型安全的情况下是有效的，这两个库最初都是在没有类型安全的情况下使用的。

例如，在 Vuex 中，如果您决定从另一个模块调用 Action 或突变，您将使用 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 这种架构由提到的库定义，用于在没有类型安全的情况下使用，同时仍然允许 react 性和集中状态突变。常量有助于确保在商店实例上注册操作/变更、提高可预测性并为代码编辑器提供自动完成功能。