Redux:如何做后端持久性的意见/例子?

我想知道如何使用Redux的人正在接近他们的后端持久性。 特别是,您是将“操作”存储在数据库中,还是只存储应用程序的最后一个已知状态?

如果您正在存储这些操作,那么您是从服务器请求它们,然后在给定页面加载时重播它们? 难道这不会导致一些性能问题与大规模的应用程序,有很多的行动?

如果你仅仅是存储“当前状态”,那么在客户的行为发生的情况下,你是如何坚持这个状态的?

有没有人有一些代码的例子,他们如何将redux减速器连接到后端存储apis?

我知道这是一个非常“取决于你的应用程序”types的问题,但是我只是在思考这里的一些想法,试图感受一下这种“无状态”架构如何在全栈意义上工作。

感谢大家。

绝对坚持你的减速器的状态!

如果你坚持一系列的动作,你永远不可能在你的前端修改你的动作,而不会在你的prod数据库中乱动。

例如:坚持一个reducer的状态到服务器

我们将从三个额外的动作types开始:

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

我使用redux-thunk来执行asynchronous服务器调用:这意味着一个动作创build者函数可以dispatch额外的动作并检查当前状态。

save动作创build者立即分派一个动作(这样你就可以显示一个微调,或者在UI中禁用“保存”button)。 一旦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 }; 

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

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

 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做些什么 – 也许这是一个新创build的实体的ID等。

我希望这有助于,这对我来说是非常好的!