Что делать с вложением React HOC
Я очень ценю HOC в React. Это действительно круто:
export default withStyles(styleSheet)(MyComponent);
Но однажды я обнаружил, что в моем проекте есть несколько вложенных HOC для многих компонентов:
export default
withCheckingAccess(ACCESS)(
withHoc1(
withHoc2(
withHoc3(
connect(mapStateToProps, mapDispatchToProps)(withStyles(styleSheet)(MyComponent))
)
)
)
)
);
Это действительно выглядит некрасиво, поэтому мне интересно, что является лучшим методом или, может быть, хорошей библиотекой NPM, чтобы справиться с этим. Например, чтобы преобразовать его в:
export default awesomeHocsDealer(
[
withCheckingAccess(ACCESS),
withHoc1,
withHoc2,
withHoc3,
withStyles(styleSheet)
],
connect(mapStateToProps, mapDispatchToProps)(MyComponent),
);
спасибо, конечно, если ничего другого, я сделаю это сам. Но я пришел сюда за советом, как это сделать лучше, потому что я действительно не думаю, что я первый, кто решил с этим справиться.
Если вы хотите найти библиотеки, обратите внимание, что это называется функциональная композиция и широко используется в функциональном программировании. Похоже, Redux предоставляет вам реализацию, например: redux.js.org/api/compose.
спасибо я покопаюсь сочиняю
@jonrsharpe, вот и все. redux compose, это функция, о которой я спрашивал. Итак, теперь я могу заняться export default compose(withHoc1, withHoc2, connect)(MyComponent). Спасибо! Не могли бы вы написать это как ответ ...? Отмечу как правильное
Обратите внимание, что новое предложение React Hooks решает именно эту проблему! Но это всего лишь экспериментальное предложение. Я также слышал о плагинах ReactDevTools, очищающих HOC в chrome devTools.
Это было бы тривиально написать самому, не так ли? Что-то вроде
const apply = (funcs, target) => funcs.reverse().reduce((result, func) => func(result), target);. Кроме того,connect(...)может так же легко быть в массиве с другими HOC.