Многие приложения имеют повторяющиеся функции для разных редьюсеров с небольшими изменениями. Например, многие формы, которые имеют режимы просмотра и редактирования.
Одним из подходов было бы дублирование кода редуктора:
function userFormReducer(state, action) { switch (action.type) { case SET_USER_VIEW_MODE: return { ...state, viewMode: action.payload.viewMode }; ... } } function jobFormReducer(state, action) { switch (action.type) { case SET_JOB_VIEW_MODE: return { ...state, viewMode: action.payload.viewMode }; ... } } function companyFormReducer(state, action) { etc...}
лучшим подходом было бы делегировать работу выделенному редьюсеру, который сохраняет viewMode для каждой формы:
function formReducer(state, action) {
switch (action.type) {
case SET_VIEW_MODE:
return {
...state,
[action.payload.formName]: {
viewMode: action.payload.viewMode
}
};
...
}
}
Также есть несколько других вариантов:
- Используйте редуктор более высокого порядка для аналогичной функциональности редуктора;
- Используйте промежуточное ПО, если ваш вариант использования оправдывает это. Например, если вы повторяете аналогичный код для многих типов действий.
Держите его СУХИМ (не повторяйтесь). Потраченное время на размышления о том, как повторно использовать код, почти всегда оказывается эффективным в долгосрочной перспективе. Не ленитесь, это того стоит!
Все статьи из этой серии:
https://medium.com/@adamklein_66511/redux-bad-practices-1-lists-as-arrays-9115ba87b0ce
https://medium.com/@adamklein_66511/redux-bad-practices-2-duplicate-code-9f2f3d774d4d
https://medium.com/@adamklein_66511/redux-bad-practices-3-nested-state-6eebf1a410df
https://medium.com/@adamklein_66511/redux-bad-practices-5-duplicate-state-996d259758e3
https://medium.com/@adamklein_66511/redux-bad-practices-6-new-objects-on-the-fly-c38b503948a5
https://medium.com/@adamklein_66511/redux-bad-practices-7-mix-ui-state-with-model-data-cdca6c8d8fd9
Первоначально опубликовано на 500tech.com.