2016-11-17 41 views
0

我推荐的一种模式是使用选择器来尽可能隐藏商店的形状。这样,如果您需要更新商店的形状,您应该只能更新选择器,而不能更新应用程序的其他部分。React Redux - 存储对象的方法

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

作为众多例子之一,我们假设我在Redux中构建了一个文件系统。我有一个可以是目录或文件的文件列表。

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

比方说,我有一个文件列表,我想根据文件或目录是否有不同的Item组件(即DirectoryItemFileItem)。实现这一

一种方式是做这样的事情:

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

(或者我可以创造一个更高阶FileListItem成分,例如,做了检查,并使得无论是DirectoryItemFileItem

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

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

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

另一种选择将创建一个isDirectory选择这需要一个文件编号为道具,做这样的事情:

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

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

想知道在Redux中推荐哪种方法吗?我错过了另一种可以帮助解决这个问题的方法吗?

回答

2

做事情的功能方式只是规定将对象的方法撕掉并将其称为函数。

推荐的方式是调用它,而不是有一个this,只需传递一个常规参数。这不是要求。您只能使用callapply。这在js中可能看起来很奇怪,但运营商可能很快就会改变。

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

在您的例子

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

你传递状态(有命名错误)和道具,然后利用这些信息拿出一个答案。但是你可以选择传递一个目录入口对象。不需要从状态中获取它。

请注意,这使得它非常接近一种方法。

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

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

但是,它在本质上功能很多。真的没有必要或不需要使生活变得更加复杂。添加一个更高阶的组件或者试图将我们的问题变成一种更加Redux-y的处事方式是无用的复杂事情。

选择器被推荐用于选择状态,因此状态的使用不受状态的影响。这是一个抽象层,将您的减速器与您的mapStateToProps分开。

选择器现在被认为是Redux Way的一部分,但事实并非如此。所以,根据你的判断,被告知为什么是这样做的,你可以选择不使用它

而且,根据您的判断,您可以选择用您自己的版本替换当前趋势。强烈建议这样做,当然在考虑替代方案之后。

通常最好的解决方案就是你自己想出的解决方案。作为您的问题领域的最了解者,您是唯一有资格制定出匹配的解决方案的人员。如果有更好的东西出现,那些已经发展出了我们所有人都能够从中获得灵感并从中获得灵感的人的想法的人可能会从他们的观点出发。

没有(也可能不应该是)神圣的范例。一切都有资格重新考虑。奥卡姆的剃刀指出最简单的答案很可能是正确的答案。

而且Redux非常关注简单性。所以要做的事Redux Way主要是做直接的方式。