React Redux - 存储对象的方法

Question

我见过推荐的一种模式是在可能的情况下使用选择器来隐藏商店的形状。这样，如果您需要更新商店的形状，您应该能够只更新您的选择器，而不是应用程序的其他部分。

然而，在州内使用模型也会出现同样的问题。

作为众多示例之一，假设我正在 Redux 中构建文件系统。我有一个文件列表，可以是目录或文件。

我的商店可能有一个 fileList 属性，其中包含一个文件 ID 数组以及一个 files 对象，该对象将 fileId 映射到一个文件对象。

假设我有一个文件列表，我想根据它是文件还是目录，有不同的 Item 组件（即 DirectoryItem 和 FileItem） .

实现此目的的一种方法是执行以下操作：

{
  files.map(file => {
    file.type = 'directory' ? 
      <DirectoryItem key={file.id} ...file /> : 
      <FileItem key={file.id} ...file />
  )}
}

（或者我可以创建一个更高阶的 FileListItem 组件，例如，它会进行检查并呈现 DirectoryItem 或 FileItem）

然而这可能并不理想，因为现在我的组件需要知道文件对象的结构。我可能想添加不同类型的对象（即快捷方式文件或共享文件），并且可能决定 type 属性不再是我想要表示数据的方式。因此，我需要去更新我的所有组件等。

例如，如果我在 Backbone 中这样做，我可能会选择在我的模型上定义一个 isDirectory() 函数，但这似乎不是 Redux 的方式做事。

我能想到的一个可能的解决方案是创建一个 FileUtils 助手 class，它导出一个 isDirectory 方法并将一个文件对象作为参数。

另一种选择是创建一个 isDirectory 选择器，它将文件 ID 作为属性，执行类似的操作：

(files, props) => state.files[props.fileId].type == 'directory'

如果我要创建选择器，我想我需要创建一个高阶组件来调用选择器。

只是想知道在 Redux 中是否推荐这两种方法？我是否缺少另一种可以帮助解决此问题的方法？

Answer 1

函数式做事方式简单地规定将方法从对象中分离出来并将其称为函数。

推荐的调用方式是不使用 this，而是简单地传递一个常规参数。这不是必需的。您可以只使用 call 或 apply。这在 js 中可能看起来很奇怪，但这可能很快就会随着新的 :: 运算符而改变。

现在，你可以给这个函数任何你喜欢的东西来帮助它获取数据。

在你的例子中

(files, props) => state.files[props.fileId].type == 'directory'

你传递状态（那里的命名错误）和道具，然后使用这些信息得出答案。但是您可以改为选择将目录条目对象传递给它。无需从状态中获取它。

请注意，这使它非常接近于一种方法。

isDirectory = entry => entry.type === 'dir';

现在，因为它没有获取状态，所以它没有从状态中选择任何东西，因此不是选择器。

但是，它本质上具有很多功能。确实没有必要或没有必要让生活变得比这更复杂。添加更高阶的组件或试图将我们的问题硬塞进更 Redux-y 的做事方式中是不必要地使事情复杂化。

建议使用选择器来选择状态，这样状态的使用与状态形状无关。它是一个抽象层，将 mapStateToProps 与 reducer 分开。

选择器现在被认为是 Redux Way 的一部分，但并非总是如此。因此，根据您的判断，在得知为什么某些事情是按照现在的方式完成后，您可以选择不使用它。

并且，您可以自行决定选择用您自己的版本替换当前趋势。强烈建议这样做，当然是在考虑替代方案之后。

通常最好的解决方案是您自己想出的解决方案。作为最了解您的问题领域的人，您是唯一有资格制定匹配解决方案的人。

那些提出了我们所有人都从中汲取灵感并从中汲取灵感的伟大想法的人可能会在更好的事情出现时从他们的观点出发。

没有（而且可能不应该）一个神圣的范例。一切都可以重新考虑。奥卡姆剃刀原则表明，最简单的答案很可能是正确的。

Redux 非常注重简单性。因此，以 Redux 方式做事主要是以直接的方式做事。

React Redux - 存储对象的方法

React Redux - Methods on store objects

reactjs

redux

react-redux