javascript - React + Redux - 架构方法

Question

嗨 Stackoverflow 的用户:)

我目前正在学习 React+Redux。我有一个架构问题，希望您能回答。

假设我有一个界面，我可以在其中创建问题并将它们保存到 API。最初，当前保存的问题是从 API 加载并保存在 Redux 存储中。

answers 数组看起来像这样:

var answers = [
	{
		id: 1,
		title: 'can crop circles be square?',
		correct: false
	},
	{
		id: 2,
		title: 'can you daydream at night?',
		correct: true
	}
	{
		id: 3,
		title: 'do Jewish vampires still avoid crosses?',
		correct: true
	},
]

在我的界面中，我有不同的选项来编辑或删除给定的问题。因此，我想为我正在编辑的问题设置一个事件状态。一种方法是更改​​ Redux 状态，因此每个问题都有一个 active 属性。如果我正在编辑问题 1，状态将如下所示:

var answers = [
	{
		id: 1,
		title: 'can crop circles be square?',
		correct: false,
		active: true
	},
	{
		id: 2,
		title: 'can you daydream at night?',
		correct: true
	}
	{
		id: 3,
		title: 'do Jewish vampires still avoid crosses?',
		correct: true
	},
]

我担心的是我将我的应用程序状态与 API 数据混合在一起。这是正确的做法，还是有更好的方法将 API 数据与状态分开？

Answer 1

我认为您只需要将对数据范围的理解集中在 web 应用程序上，因为它是由 redux 状态树定义的，请记住状态树是您应用程序的完整定义。

这样想问题就迎刃而解了。现在没有“API 数据”这样的东西，只有来自某处的初始状态。也许来自本地存储，也许来自跨机器边界的 API，这并不重要，因为它只是用于初始化状态树分支的数据。一旦该分支被初始化，数据被吸收到状态主体中，您就可以根据应用的需求自由地进行任意更改。

只有一个论据可以反对这一点——如果数据需要返回到原始来源怎么办？当数据离开应用程序并且在 API 的情况下跨越机器边界时，需要将其重新转换为正确的形状。这里没有什么不寻常的，这样做的要求不应不必要地告知状态树的形状。

简而言之，不要担心“应用程序状态与 API 数据”。用数据填充状态树并根据应用程序的要求精确地构建它。根据外部需求提取数据。