Промежуточное ПО для 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

Надеюсь, это поможет вам, и свяжитесь со мной, если вы думаете, что мы можем добавить больше к этому промежуточному программному обеспечению.