Я разрабатываю приложение в response / redux, и я новичок в flux / redux и однонаправленных шаблонах. Я столкнулся с проблемой, которую я не знаю, как правильно решить в однонаправленной архитектуре
Я хочу проиллюстрировать проблему на примере формы регистрации пользователя, которая может отображаться в разных частях приложения. Обратите внимание, что основная проблема заключается в том, нужно ли и где обрабатывать события завершения подкомпонентов, и UserRegistration является лишь примером.
Допустим, у меня есть компонент UserRegistration, который будет отображаться как форма. Этот компонент будет обрабатывать свое собственное действие отправки, которое может включать в себя некоторые асинхронные вызовы конечной точки сервера и, в конце концов, должно привести к изменению хранилища / состояния (например, добавлению новых данных пользователя).
Пользовательский поток следующее:
- пользователь нажимает кнопку «зарегистрироваться»
- пользователь видит регистрационную форму
- пользователь вводит данные и нажимает «отправить»
- форма регистрации пользователя исчезает
Я хочу включить эту UserRegistration форму в разные места приложения.
Допустим, я хочу показать форму регистрации на основе маршрута /register и после успешной регистрации я хочу вернуться к /.
Интуитивно понятная вещь, которую я должен сделать (исходящая из неоднонаправленного мира), будет выглядеть примерно так
function MyApp() {
const isRegisterRoute = //... somehow check if /register is active
return (
<button onClick={ () => { routeTo('/register') }}>register</button>
{
isRegisterRoute && (
<UserRegistration // handles actual registration internally (network calls and store modification)
onCompletion={ () => { routeTo('/' } } // pass completion handler which will route back to initial path
/>
)
}
)
}
Это решило бы проблему, но мне интересно, является ли обратный вызов для такого компонента со сложным потоком антипаттерном в однонаправленной архитектуре.
- Одна проблема заключается в том, что обратный вызов в основном меняет направление, и он больше не является однонаправленным.
- Другая проблема заключается в том, что мне пришлось бы передать обработчик
onCompletion вниз по цепочке в моем компоненте, чтобы он запускался после завершения регистрации. Этот обход обработчика не кажется чистым, поскольку он просачивается во множество мест.
С другой стороны, я не хочу обрабатывать маршрутизацию обратно в '/' внутри UserRegistration компонент в качестве пути успеха или действия может отличаться в зависимости от того, где я его использую, поэтому я хочу, чтобы logi c был отделен от компонента.
Какое было бы подходящее / оптимальное решение для проблема, описанная выше в потоке?