Мне интересно, как люди, использующие Redux, приближаются к их постоянному усилению. В частности, вы храните "действия" в базе данных или используете только последнее известное состояние приложения?
Если вы храните действия, вы просто запрашиваете их с сервера, а затем воспроизводите их все, когда загружается данная страница? Не могли ли это привести к некоторым проблемам производительности с крупномасштабным приложением, где есть много действий?
Если вы сохраняете только "текущее состояние", как вы на самом деле сохраняете это состояние в любой момент времени, когда действия происходят на клиенте?
Есть ли у кого-нибудь примеры кода того, как они соединяют редукторы редукции с backend-хранилищем?
Я знаю, что это вопрос типа "это зависит от вашего приложения", но я просто размышляю над некоторыми идеями здесь и пытаюсь понять, как эта "безгражданная" архитектура может работать в полном стеке чувство.
Спасибо всем.
Определенно сохраняйте состояние ваших редукторов!
Если вы сохранили последовательность действий вместо этого, вы никогда не сможете изменять свои действия в своем интерфейсе, не возившись внутри своей базы данных prod.
Пример: сохранение состояния редуктора на сервере
Мы начнем с трех дополнительных типов действий:
// actions: 'SAVE', 'SAVE_SUCCESS', 'SAVE_ERROR'
Я использую redux-thunk для выполнения асинхронных вызовов сервера: это означает, что одна функция-создатель действия может dispatch
выполнять дополнительные действия и проверять текущее состояние.
Создатель действия save
немедленно отправляет одно действие (чтобы вы могли показать счетчик или отключить кнопку "сохранить" в своем пользовательском интерфейсе). Затем он отправляет SAVE_SUCCESS
или SAVE_ERROR
действия после завершения запроса POST.
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
};
(N.B. $.ajax
будет полностью работать вместо материала window.fetch
, я просто предпочитаю не загружать весь jQuery для одной функции!)
Редуктор просто отслеживает любой выдающийся запрос сервера.
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
, который вернулся с сервера - возможно, это идентификатор вновь созданного объекта и т.д. и т.д.
Надеюсь, что это поможет, это сработало до сих пор для меня!