Я нашел изящный трюк, который может помочь с хаосом вызова функции с большим количеством аргументов, будь то объект с множеством свойств или что-то еще.
В JS мы можем отправлять столько аргументов, сколько мы хотим, проблема с этим иногда аргумент, отправка, извлечение вещей становятся нечитаемыми и трудными для управления.
const isUserValidForSomeAction = ({ isTheUserDumb, isUserFromEarth, userKnowledgeOfLanguage, supportedLanguages, isDevAccount, }) =>{ /* some computation with above calculations and then return true or false */ } function someComponent(props){ const shouldShowAction = isUserValidForSomeAction({ isTheUserDumb : props.isTheUserDumb, isUserFromEarth: !!find(props.earthUsers, {id:props.user.id}), userKnowledgeOfLanguage: props.user.languages, supportedLanguages: props.supportedLanguages, isDevAccount:props.devVars.isDevAccount, })}
Теперь это выглядит хорошо, но иногда извлечение этих функций не очень полезно с точки зрения разработки, поскольку каждый раз, когда любой из этих реквизитов изменяется, вы должны проверять и изменять аргумент, отправляющий вещи, и иногда эту функцию можно использовать в нескольких местах, и эта часть извлечения аргументов повторяться, и это не очень приятная работа, пишите эту часть снова и снова.
Люди думают о написании своих собственных функций, которые могли бы работать с аргументами, которые они отправляют.
Итак, чтобы упростить задачу (я не знаю, может ли это быть полезно более чем в нескольких случаях), просто напишите другую функцию, которая принимает реквизиты и возвращает структуру аргументов этой функции.
Итак, приведенный выше код теперь выглядит так.
const isUserValidForSomeAction = ({ isTheUserDumb, isUserFromEarth, userKnowledgeOfLanguage, supportedLanguages, isDevAccount, }) =>{ /* some computation with above calculations and then return true or false */ } const getUserProperties = props => ({ isTheUserDumb : props.isTheUserDumb, isUserFromEarth: !!find(props.earthUsers, {id:props.user.id}), userKnowledgeOfLanguage: props.user.languages, supportedLanguages: props.supportedLanguages, isDevAccount:props.devVars.isDevAccount, }) const checkIfCanShowAction = compose(isUserValidForSomeAction, getUserProperties); function someComponent(props){ checkIfCanShowAction(props); ... }
Это может быть полезно, поскольку вы отделяете чистые и нечистые вещи от вызова функции. GetUserProperties может быть нечистым и может извлекать что-то из реквизита, может быть изменен в соответствии с изменением ключей пропса. Кроме того, эта функция может также использовать область видимости или делать другие нечистые вещи, работа компонента будет заключаться в вызове этой функции со всеми реквизитами.
По сути, он устраняет пробелы между аргументами и всеми источниками данных, от которых он зависит. Аналогичная практика кодирования используется в «CreateSelector» для повторного выбора при написании селектора, вы даете ему набор функций, которые извлекают аргументы, которые потребляет последняя функция (теперь, думая об этом, они просто используют параллельную композицию с добавленной функцией кеширования) . Параллельно, потому что в этом случае каждая из функций экстрактора аргументов получает одни и те же аргументы, и то, что они возвращают, становится аргументом последней функции. В случае нормальной компоновки аргументы функций будут переданы по конвейеру. Но здесь я просто использую базовые функции создания и работаю над этим.
Теперь это может быть полезно для того, чтобы ваш код выглядел чище. Если структура props одинакова в нескольких компонентах (допустим, вы используете функцию в mapStateToProps и извлекаете вещи из хранилища), то ее можно использовать повторно (ну, вместо этого вы можете использовать CreateSelector). Эту функцию можно использовать, если вы хотите, чтобы ваш componentWillReceiveProps / getStateDerivedFromProps был более чистым.