时间戳

首页 > 解决方案 > 哪种存储加载过程的方法更可取？

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

问题描述

请您帮忙决定哪一种架构会更好（使用 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

到目前为止，我已经做了一些简单的项目，两种方式都很好。您能否给一些建议，为更大的项目走哪条路？

标签： react-nativereact-reduxredux-thunksetstate

解决方案

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

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

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

推荐阅读