Как сохранить несколько копий определенного состояния в redux - PullRequest
Новая
       14

Как сохранить несколько копий определенного состояния в redux

1 голос
/ 17 июня 2020

Следует отметить, что я использую Redux с React-Native.

Для простоты, допустим, у меня есть программа для просмотра электронной почты. Есть домашняя страница с огромным списком писем, и когда вы нажимаете на письмо, вы попадаете на другой экран. Здесь содержимое электронного письма, заголовок, тема, тело - все хранится в части состояния, управляемой redux. Все работает нормально.

Допустим, я вернулся с этой страницы и теперь перехожу к другому электронному письму. Предыдущее письмо появляется на долю секунды до того, как будет показано новое. Здесь следует отметить, что я храню данные в AsyncStorage как своего рода «кеш?». Проблема здесь в том, что, поскольку я обновляю состояние только каждый раз, когда нажимаю на электронное письмо, состояние, которое является телом страницы просмотра электронной почты, обновляется через долю секунды после того, как пользователь перешел к нему. Это раздражает.

Суть вопроса заключается в следующем:

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

или

это лучший способ сделать это?

Спасибо

1 Ответ

0 голосов
/ 17 июня 2020

Вы можете использовать методы жизненного цикла Redux, чтобы справиться с этим. Допустим, состояние вашего компонента сведений электронной почты выглядит примерно так: 

export const initialState: StateShape = {
  loading: false,
  readOnlyEmailData: {
    recipientEmails: null,
    senderEmail: null,
    body: null,
  },
};

Когда компонент сведений электронной почты (назовем его EmailDetail.jsx) загружается, вы можете использовать ComponentDidMount (), чтобы получить и установить свой ценности.

Вероятно, у вас будут действия и средства создания действий, такие как getEmail, getEmailSuccess и getEmailError. Установите для загрузки значение true в getEmail, а затем снова false в случае успеха или ошибки. Вы можете добавить компонент счетчика с условным рендерингом (который легко позаимствовать из чего-то вроде MaterialUI) в EmailDetail, который виден только тогда, когда загрузка истинна, и отображать остальную часть вашего контента, когда загрузка ложна.

Когда пользователь нажимает кнопку «Назад» или иным образом уходит от компонента, componentWillUnmount () может быть предоставлен список действий, которые необходимо выполнить, когда компонент готовится к размонтированию. В этом случае вы можете использовать метод сброса для сброса загрузки и readOnlyEmailData в исходное состояние при отключении.

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

Есть другие способы сделать это, это не самый оптимизированный, но он должен работать немного лучше, чем то, что вы пробовали до сих пор. Надеюсь поможет :)

...