Правильно ли используется обратный вызов для обновления состояния компонента от Redx Saga?

Question

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

Что я сейчас использую

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

Задача

Допустим, у меня есть loginSuccess в моем глобальном состоянии, и я использую его для перенаправления или обработки ошибок в моем компоненте Login. Например, я хочу также обработать ответ для экрана сброса пароля. Поэтому я храню другую информацию в своем глобальном состоянии и использую ее в соответствующем компоненте.

Это даже проблема?

У меня такое ощущение, что это слишком много информации, чтобы хранить в глобальном состоянии.

Что я читаю новенького?

Итак, я начал читать о передаче callback моему создателю действия, который обрабатывает ответ. Таким образом, логика обработки ошибок остается локальной для компонента.

* * Пример тысячи тридцать один * ** +1032 +1033 *

Login.js

componentDidMount(){
 this.props.login({
        data, // login payload.
        callback: (response) => this.handleResponse(response)
 })
}

// response handler.
handleResponse = response => {
   this.setState({isError: response.isError});
}

render () {
   /* Use the this.state.isError to determine either to redirect or show error */
}

Actions.js

export const login = payload => ({
  type: ATTEMPT_LOGIN,
  payload
})

saga.js

// login handler in saga.
function* loginAttempt({payload}) {
  const {data, callback} = payload;
  try {
     const resp = yield apiCaller.call(method, url, data, headers); // utitly to fetch data and return a standard response.
     callback(resp);
  }catch(error){
     callback(DEFAULT_ERROR_RESPONSE); // {isError: true, message: 'Something went wrong'}
  }
}

Какой из них лучше?

Есть ли лучший способ справиться с такого рода вещами? Как вы, ребята, справляетесь с этим?

Answer 1

То, что вы называете «глобальным» состоянием, - это дизайнерское решение, принятое Redux для одного магазина. Можно добавить столько loginSuccess свойств, сколько вам нужно в магазине. Чтобы сохранить их организованность, вы используете combineReducers, чтобы разделить ваш магазин на кусочки.

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

function* loginAttempt(payload) {
  try {    
    const response = yield apiCaller.call(method, url, data, headers);
    yield put(LOGIN_SUCCESS, response);
  }catch(error){
    yield put(LOGIN_ERROR, error);
  }
}

Состояние по умолчанию может быть примерно таким:

user: null,
loginRequestStatus: {
  inProgress: false,
  error: false,
}

Редуктор для ATTEMPT_LOGIN должен запустить его. Редуктор для LOGIN_SUCCESS должен установить пользователь. LOGIN_ERROR устанавливает ошибку. Сделайте селекторы типа selectAuthUser и selectIsLoginInProgress, которые могут использовать ваши компоненты. Если вы используете маршрутизатор, который может общаться с Redux, например router5, вы можете даже перенаправить из Saga.