哪种存储加载过程的方法更可取？

Question

请您帮忙决定哪一种架构更好 （使用 react-native、react-redux、redux-thunk 从 API 获取列表）

1. 示例

// component
componentDidMount() {
	this.props.dispatch(fetchFunction());
}

// thunk action
fetchFunction () {

	dispatch START_LOADING

	return dispatch (
		fetch()
			dispatch SUCCESS_LOADING
	);

}

或者

1. 示例

// 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 中查看所有值，而不必查找单个组件来查看它们的本地状态。