Вызов методов компонента после завершения вызова API redux-saga: использовать componentDidUpdate или передать метод создателю действия?

Я борюсь с преобразованием существующего проекта React в redux-saga. Я изучаю redux-saga, потому что команда, к которой я присоединяюсь, попросила меня, и я подумал, что преобразование этого проекта будет хорошим способом обучения.

Основная проблема, с которой я столкнулся, заключается в том, что мой проект во многом основывался на обещаниях и, особенно в App.js, я мог выполнять свои вызовы API, а затем предпринимать различные действия в зависимости от успеха или неудачи.

Используя redux-saga, я в значительной степени потерял этот контроль: если я не использую такой пакет, как redux-thunk-saga, или не отслеживаю переменные в магазине, чтобы попытаться определить, был ли вызов API успешным, я не знаю, были ли мои вызовы API успешными.

В частности, после того, как мой пользователь вошел в систему, я хочу настроить прослушиватели socketIO. У меня есть метод в App.js, который это делает. Но если я запустил сагу о authenticate, я не знаю, удалось ли вызвать мой метод setupSocketIO.

Одно из решений, которое я придумал, заключалось в том, чтобы отслеживать redux state и видеть, изменился ли мой токен входа с помощью componentDidUpdate.

Другое возможное решение - передать метод setupSocketIO в качестве параметра моему создателю действия authenticate. Примерно так в app.js (в псевдокоде)

   /* APP.JS */

    import {authenticate} from actionCreators  
    dispatch(authenticate(name, password, this.setupSocketIO.bind(this))

    setupSocketIO = (name,token) => {
         ... 
    }


/* SAGAS/AUTHENTICATE.JS */

function* authenticate() {
     try {

      const {name,password, setupSocketIO} = yield (actionTypes.AUTHENTICATE)
      const token = call(apiLogin(name,password)
      call(setupSocketIO(name,token)
     } catch (error) {
       ...  
     }

так что сага об аутентификации call использует этот метод в случае успешного входа в систему.

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

Переместите setupSocketIO в промежуточное ПО и отправьте действие из саги, чтобы начать установку.

Ori Drori 29.11.2018 20:39

На данный момент метод, который содержит все прослушиватели socketIO, зависит от компонента App.js, то есть он ссылается на другие методы в компоненте через this. Как мне (или я) привязать метод к App.js, если переместить его в промежуточное ПО? (Кроме того, если у вас есть ссылка на пример или источник, который иллюстрирует то, что вы говорите, я был бы признателен, так как я новичок в redux ...)

Cerulean 29.11.2018 21:43

В идеале компонент представления должен выполнять только просмотр. Все побочные эффекты должны передаваться промежуточному программному обеспечению (например, саги). Так что, если вы можете вырвать его из приложения, промежуточное ПО - хорошее место для логики установки. Вот общий пример socketIO в промежуточном программном обеспечении - nmajor.com/posts/….

Ori Drori 29.11.2018 21:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
3
401
0

Другие вопросы по теме