Question

您能帮忙决定哪种架构更好吗？（使用具有react-native，react-redux，redux-thunk的API来获取列表）

示例

// component
componentDidMount() {
	this.props.dispatch(fetchFunction());
}

// thunk action
fetchFunction () {

	dispatch START_LOADING

	return dispatch (
		fetch()
			dispatch SUCCESS_LOADING
	);

}

或

示例

// component
componentDidMount() {
	this.setState({'loading': true})
	this.props.dispatch(fetchFunction()).finally(
		this.setState({'loading': false})
	);
}

//thunk action
fetchFunction () {

	return dispatch (
		fetch()
			dispatch SUCCESS_LOADING
	);

}

我的想法是要在本地组件状态下存储“加载过程”？这种方法的弊端和优点是什么？

我看到的是-示例2：

如果加载需要更长的时间，我可以离开组件（它会被卸载），并且我会看到警告-“正在改变状态的卸载组件”

1个示例：在redux商店中保存了很多我不需要的额外数据（还有很多我需要从持久性中排除的数据），例如，如果我有一个网上商店产品组件，我将存储很多UI道具redux（例如，列出10个产品，每个产品都有自己的状态按钮）:( 但是我喜欢它，因为所有逻辑都停留在redux-thunk-actions中，而且我不需要关心组件在派发后如何继续编码，无论是诺言还是非示例：

 this.props.dispatch(fetchFunction()).then(() => {});

或只是

 this.props.dispatch(fetchFunction());
 .. some code

到目前为止，我已经完成了简单的项目，并且两种方法都能正常工作。您能否提供一些建议来解决更大的项目？

Answer 1

如果该组件树之外的组件需要了解加载状态，则将加载状态保留在存储中，以便那些外部组件可以查询该状态。

在大型应用程序中，组件是否需要了解给定的状态是可以改变的。最初，组件X具有本地状态，因为其他组件无需了解本地状态X，但是随着应用程序的增长，引入了需要了解本地状态X的新组件，thunk等，因此必须将其移动到商店。因此，要解决此问题，一种方法是从一开始就将所有状态都放入Redux中，这样就不必担心无法预料的将本地状态重构为全局状态。

保留redux存储中的所有内容也使调试更加容易，因为您可以在redux devtools中查看所有值，而不必查找单个组件以查看其本地状态。

哪种存储方法存储方法更可取？

1 个答案: