Промежуточное ПО для redux
Я знаю боль, когда бэкэнд ломается и начинает выдавать undefined или null для поля, в котором я ожидаю массив или объект. Чтобы решить эту проблему, мы должны добавить проверки, и если вы работаете с React, то в каждом компоненте, где используется это поле. Вы также можете добавить проверку в reducer, но время является ограничением, а также это очень утомительная работа.
Я тоже столкнулся с этой проблемой и придумал редуктор-корректор. У него есть возможность манипулировать данными действия. С помощью «redux-corrector» вы можете манипулировать данными действия перед их передачей редуктору. Остальные действия, не указанные в шаблоне, останутся без изменений.
redux-corrector - это промежуточное ПО, и на изображении ниже показано, как оно работает.
Перед отправкой данных редуктору они отправляются редуктору-корректору и на основе имени действия данные проверяются. Если поле не проверено, то этому полю будет присвоено значение по умолчанию, переданное в шаблоне. Это гарантирует, что вы получите то, чего ожидали.
Предположим, вы ожидаете объект для поля «друзья», но серверная часть начинает давать вам значение null, тогда в этом случае redux-corrector гарантирует, что вы получите «друзей» в качестве объекта независимо от того, какой сервер отправляет вам (зависит от значение по умолчанию, указанное вами для этого поля)
redux-corrector поддерживает все типы данных в JS. Вы также можете манипулировать массивами, сейчас он поддерживает только однородный массив.
Использовать redux-corrector очень просто, все, что вам нужно, это импортировать magicbox из redux-corrector.
импорт {magicbox} из «редуктора-корректора»
После этого добавьте шаблон, как показано ниже, для справки внутри магазина.
const template = { "SET_NOTIFICATIONS":{ data:{ type:"object", required: true, default:{notifications:[], newNotificationCount:0}, inner_fields:{ notifications:{ type:"array", required: true, default:[] } } } } } const store = createStore(reducer,applyMiddleware(magicbox(template,(a)=>{console.log("REDUX-CORRECTOR : ",a)})))
Вы также можете передать функцию обратного вызова в качестве второго аргумента, redux-corrector отправляет данные слушателю, когда он изменяет какое-либо поле.
В приведенном выше примере предположим, что ваше действие
{«SET_NOTIFICATIONS»: data: null}
когда это передается промежуточному программному обеспечению, он увидит шаблон и затем изменит его на
{«SET_NOTIFICATIONS»: данные: {notifications: [], newNotificationCount: 0}}
НПМ: https://www.npmjs.com/package/redux-corrector
Надеюсь, это поможет вам, и свяжитесь со мной, если вы думаете, что мы можем добавить больше к этому промежуточному программному обеспечению.