Как написать логику входа в редуксе?

Я новичок в редуксе. Я пытаюсь сделать вход пользователя.

Я просто хочу понять логику отправки информации через действие.

Я хочу, чтобы пользователь ввел имя пользователя и пароль и вошёл в систему, а его статус был помечен онлайн. Вот поток:

ИНТЕРФЕЙС -> ДЕЙСТВИЕ -> ПРОМЕЖУТОЧНОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ -> РЕДЬЮСЕР

Таким образом, когда пользователь нажимает кнопку входа в систему, это действие будет передано редюсеру.

У меня есть 3 варианта реализации этого:

  1. Пользователь нажимает кнопку входа в систему, будет вызвана функция, которая получит идентификатор пользователя (используя карту в store.getState), и этот идентификатор будет передан действию, которое затем будет отправлено в редюсер.

действие (идентификатор пользователя) => редуктор

  1. Пользователь нажимает кнопку входа в систему, вызывается функция, а затем имя пользователя передается действию. Затем редуктор извлекает идентификатор пользователя и устанавливает статус идентификатора пользователя.

действие (имя пользователя) => редуктор

  1. Используйте промежуточное программное обеспечение, чтобы получить идентификатор пользователя и отправить его в редуктор.

действие (имя пользователя) => промежуточное ПО => редуктор

Как мне применить логику входа в систему к моему приложению.


reactjs redux react-redux middleware redux-middleware
person Piyush Kumar    schedule 18.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

по-моему нормальный поток:

  1. Пользователь вводит логин/пароль
  2. Либо восстановите эту информацию с помощью ref, либо с помощью this.state (зависит от варианта использования).
  3. сделать действие с создателем действия (doLog(username, pass))
  4. отправить это действие
  5. Редуктор «поймает» действие и асинхронную выборку с сервера. вы можете использовать redux-tunk или redux-saga, чтобы вы могли отправить другое действие после завершения входа в систему (loginSuccessAction())
  6. опять же, редьюсер должен «поймать» это действие и обновить хранилище
  7. теперь магазин изменен на новое состояние, страница должна быть обновлена ​​(с помощью mapStateToProps)
person Yichaoz    schedule 19.11.2016