Сброс избыточного состояния без разрушения реагирующих компонентов - PullRequest
Новая
       6

Сброс избыточного состояния без разрушения реагирующих компонентов

1 голос
/ 21 мая 2019

Работал с редуксом в сложном реактивном приложении. Я помещаю некоторые данные в состояние избыточности и использую эти данные для визуализации компонента. Затем вы хотите изменить страницу, и мне нужно сбросить некоторые поля в состоянии избыточности. Эти поля были использованы для визуализации предыдущего компонента. Итак, если я сбрасываю состояние перед переходом на следующую страницу, предыдущая страница перерисовывается и выдает ошибки, потому что данные отсутствуют (из-за сброса). Но я не могу выполнить сброс на следующей странице, потому что эта страница доступна во многих потоках, поэтому может быть сложно управлять, когда выполнять сброс, а когда нет.

Как такие проблемы решаются в реагирующих приложениях? Все примеры упрощены, чтобы показать проблему. в реальном приложении есть много полей для сброса.

итак, страница 1 избыточное состояние 

{field: someValue}

компонент использует значение поля 

function myComponent(props) => {
  return (props.field.someMappingOperation());
}

Теперь при переходе на страницу 2 поле должно быть нулевым, поэтому мы сбрасываем его избыточное состояние 

{field: null}

компонент выше перерисовывает, выдавая ошибку из-за 

   props.field.someMappingOperation()

и поле равно нулю. Что можно сделать, это загрузить следующую страницу, чтобы этот компонент отсутствовал на странице, а затем сбросить состояние. тем не менее, это становится очень трудным для управления, потому что вы находитесь на странице B (предположим, что список клиентов со списком, сохраненным в Redx), и вы хотите увидеть подробную информацию о клиенте, вы переходите на страницу C, когда вы нажимаете назад, вы не не хочу снова сбрасывать состояние. Таким образом, вы добавляете условия сброса. Но поскольку в приложении много потоков, доступ к этой странице можно получить разными способами. Я полагаю, что условия для каждого пути - не лучшее решение.

Edit: Я хотел бы добавить, что сброс состояния изначально не требовался, и компоненты для этого не предназначены. Поскольку приложение росло и стало достаточно сложным, это стало необходимым. Я ищу решение, которое не требует от меня добавления проверки значений реквизита в каждый компонент, например 

{this.props.field && <ComponentThatUsesField />}

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

Поскольку приложение имеет много страниц и управляет множеством различных данных, хранилище становится достаточно большим, чтобы не хотеть его клонировать.

Ответы [ 3 ]

0 голосов
/ 21 мая 2019

вы можете изменить свой код, как показано ниже: 

function myComponent(props) => {
const {fields} = props;
return (fields && fields.someMappingOperation());
}

Это не приведет к ошибке и является безопасной проверкой

0 голосов
/ 21 мая 2019

Вам не нужно использовать условия или сбрасывать свое состояние, ваш редуктор может обновить его и передать его вашему компоненту. Вы можете вызвать действие в componentDidMount() и переопределить предыдущие значения, чтобы они были доступны в вашем компоненте. Я предполагаю, что это должно подразумеваться для каждого вашего компонента, так как вы используете разные значения полей для каждого.

0 голосов
/ 21 мая 2019

Вы должны проектировать свои компоненты более гибким способом, чтобы они не зависали, если их входы пустые.

Например: 

render() {
  return (
    { this.props.field && <ComponentUsingField field={this.props.field} />}
  )
}

Это глупый пример, но вы поняли.

...