Синхронизируйте redux-saga и жизненный цикл реакции

У компонентов React есть свой жизненный цикл (componentWillMount, componentDidMount и т. д.), а у саги есть свой жизненный цикл (работает как промежуточное ПО).

Есть ли способ синхронизировать эти два жизненных цикла?

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


reactjs redux-saga
person VanDavv    schedule 14.10.2016    source источник
comment
Как правило, компоненты не должны быть защищены: они все равно находятся на клиенте. Единственное, что нужно действительно защитить, — это ваш API (ваш бэкенд), поэтому, даже если пользователь каким-то образом отображает секретный компонент без авторизации (путем его взлома или просто из-за ошибки), ваш API все равно не должен возвращать никаких данных. , поэтому он не будет отображать никакой значимой информации. Имеет ли это смысл?   -  person Antoine Jaussoin    schedule 19.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Это возможно. Вы можете создать HOC (компонент более высокого порядка), который перехватывает события жизненного цикла React и отправляет действия, сопоставленные с ними для redux-saga. В вашей саге вы можете использовать take для синхронизации жизненного цикла и потока управления.

Пожалуйста, дайте мне знать, если вам нужен рабочий пример. Я добавлю пример в мой репозиторий на Github.

// HOC
import Lifecycle from '...';

// Target component
class SecretPane extends Component {
  // ...
}

// Export wrapped SecretPane component
export default Lifecycle(SecretPane);

// ...

function* lifecycle() {
  yield take(COMPONENT_WILL_MOUNT);

  // Do something before mounted

  yield take(COMPONENT_DID_MOUNT);

  // Do something after mounted

  yield take(COMPONENT_WILL_UNMOUNT);

  // Do something before unmounted
}
person kuy    schedule 14.10.2016