gpt4 book ai didi

reactjs - Redux:如何进行后端持久化的意见/示例?

转载 作者:行者123 更新时间:2023-12-03 12:56:59 24 4
gpt4 key购买 nike

我想知道使用 Redux 的人们是如何实现后端持久化的。特别是,您是否将“操作”存储在数据库中,或者仅存储应用程序的最后一个已知状态?

如果您要存储操作,您是否只是从服务器请求它们,然后在加载给定页面时重播所有操作?对于有大量操作的大型应用程序,这是否会导致一些性能问题?

如果您仅存储“当前状态”,那么当客户端上发生操作时,您如何在任何给定时间实际保留此状态?

有人有一些代码示例来说明如何将 redux reducer 连接到后端存储 api 吗?

我知道这是一个非常“这取决于你的应用程序”类型的问题,但我只是在这里思考一些想法,并试图了解这种“无状态”架构如何在全栈中工作感觉。

谢谢大家。

最佳答案

一定要保持你的 reducer 的状态!

如果您坚持一系列操作,那么您将永远无法在前端修改操作,而无需在产品数据库中进行修改。

示例:将一个 reducer 的状态保存到服务器

我们将从三种额外的操作类型开始:

// actions: 'SAVE', 'SAVE_SUCCESS', 'SAVE_ERROR'

我使用redux-thunk执行异步服务器调用:这意味着一个操作创建器函数可以调度额外的操作并检查当前状态。

save 操作创建者立即调度一个操作(以便您可以显示微调器,或禁用 UI 中的“保存”按钮)。一旦 POST 请求完成,它就会调度 SAVE_SUCCESSSAVE_ERROR 操作。

var actionCreators = {
save: () => {
return (dispatch, getState) => {
var currentState = getState();
var interestingBits = extractInterestingBitsFromState(currentState);

dispatch({type: 'SAVE'});

window.fetch(someUrl, {
method: 'POST',
body: JSON.stringify(interestingBits)
})
.then(checkStatus) // from https://github.com/github/fetch#handling-http-error-statuses
.then((response) => response.json())
.then((json) => dispatch actionCreators.saveSuccess(json.someResponseValue))
.catch((error) =>
console.error(error)
dispatch actionCreators.saveError(error)
);
}
},

saveSuccess: (someResponseValue) => return {type: 'SAVE_SUCCESS', someResponseValue},

saveError: (error) => return {type: 'SAVE_ERROR', error},

// other real actions here
};

(注:$.ajax 完全可以代替 window.fetch 的东西,我只是不想为一个函数加载整个 jQuery!)

reducer 只是跟踪任何未完成的服务器请求。

function reducer(state, action) {
switch (action.type) {
case 'SAVE':
return Object.assign {}, state, {savePending: true, saveSucceeded: null, saveError: null}
break;
case 'SAVE_SUCCESS':
return Object.assign {}, state, {savePending: false, saveSucceeded: true, saveError: false}
break;
case 'SAVE_ERROR':
return Object.assign {}, state, {savePending: false, saveSucceeded: false, saveError: true}
break;

// real actions handled here
}
}

您可能想要对从服务器返回的 someResponseValue 执行某些操作 - 也许它是新创建的实体的 ID 等。

我希望这有帮助,到目前为止对我来说效果很好!

关于reactjs - Redux:如何进行后端持久化的意见/示例?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32949859/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com