Reactjs 当我';如果我使用redux,我是否应该始终将响应保持在全局状态,即使结果只使用一次?
目前,我有一个表单,我的用户可以在其中填写姓名、电子邮件、地址、大学等字段。然而,我们有一个来自API的大学列表。此请求通过redux saga发出,响应在视图中填充一个select 我知道redux saga有助于我管理异步操作,但将此响应保留在我的全局状态,我只使用一次 有什么答案或模式可以让我清楚地看到或理解吗Reactjs 当我';如果我使用redux,我是否应该始终将响应保持在全局状态,即使结果只使用一次?,reactjs,react-native,redux,Reactjs,React Native,Redux,目前,我有一个表单,我的用户可以在其中填写姓名、电子邮件、地址、大学等字段。然而,我们有一个来自API的大学列表。此请求通过redux saga发出,响应在视图中填充一个select 我知道redux saga有助于我管理异步操作,但将此响应保留在我的全局状态,我只使用一次 有什么答案或模式可以让我清楚地看到或理解吗 非常感谢。当然不是。Redux的状态是数据: 使用React表示短暂的状态,这种状态对应用程序全局来说并不重要,也不会以复杂的方式发生变化。例如,某个UI元素中的切换,表单输入状态
非常感谢。当然不是。
Redux
的状态是数据:
使用React表示短暂的状态,这种状态对应用程序全局来说并不重要,也不会以复杂的方式发生变化。例如,某个UI元素中的切换,表单输入状态。对于全局重要或以复杂方式变化的状态,使用Redux。例如,缓存的用户或后期草稿
正如其他人指出的,简短的回答是不,你不应该在你的Redux商店中保存数据,除非它将继续与你的应用程序的其余部分相关 如果您使用Redux Saga处理异步数据获取操作,那么您可以在操作中传递
onSuccess
和onFailure
回调,以便在异步调用完成后调用Saga。例如,使用react钩子可以执行以下操作:
const SelectUniversity = ({getUniversities}) => {
let [universities, setUniversities] = useState({
fetched: false
});
const handleSuccess = (items) => {
setUniversities({
fetched: true,
items: items
});
}
const handleFailure = (error) => {
setUniversities({
fetched: true,
error
});
}
useEffect(() => {
if(!universities.fetched){
getUniversities(
{foo: bar}, // async call params if any needed
handleSuccess,
handleFailure
)
}
}, [universities])
return !universities.fetched
? <Spinner /> // if universities not fetched yet, show loading spinner
: !universities.error // if fetched and no error, display results
? <Select items={universities.items} />
: /* if fetched and error, handle error case here */;
}
const mapDispatchToProps = dispatch => ({
getUniversities: (params, onSuccess, OnFailure) => dispatch({
type: 'FETCH_UNIVERSITIES',
payload: { params, onSuccess, OnFailure }
}),
})
export default connect(
null,
mapDispatchToProps
)(SelectUniversity)
function* fetchUniversities({type, payload}){
const { params, onSuccess, OnFailure } = payload;
try{
const universities = yield call(fetchUniversities, params); // your actual async fetch call
yield call(onSuccess, universities);
}catch(err){
yield call(OnFailure, err);
}
}
export function* watchFetchUniversities() {
yield takeLeading('FETCH_UNIVERSITIES', fetchUniversities)
}
非常感谢。非常感谢你的解释,现在已经非常清楚了!