Forma React / Flux para manejar acciones sensibles a los permisos con flujos de inicio de sesión
He estado jugando con React / Flux, y estoy teniendo problemas para entender la 'Flux Way' por manejar acciones sensibles a los permisos.
Pregunta general: cuando un visitante que no ha iniciado sesión intenta una acción que requiere que él / ella inicie sesión, ¿cuál es la forma Flux de (a) verificar si un usuario ha iniciado sesión, (b) iniciar el flujo de inicio de sesión, (c ) terminando la acción sobre el éxito?
Tomemos un ejemplo de una aplicación de foro, que requiere que los usuarios inicien sesión para publicar:
Tenemos un componente de formulario de comentarios (tomado principalmente de React tut de FB) como tal:
var CommentForm = React.createClass({
handleSubmit: function ( e ) {
e.preventDefault();
// get data
commentData = {
content: this.refs.content.getDOMNode().value.trim()
};
this.props.onCommentSubmit( commentData );
this.resetForm();
},
resetForm: function () {
this.refs.content.getDOMNode().value = '';
},
render: function () {
return (
<form className="comment-form" id="comment-form" onSubmit={ this.handleSubmit }>
<textarea name="comment[content]" placeholder="What's on your mind?" ref="content"></textarea>
<button className="post-comment button" type="submit">Post</button>
</form>
)
}
});
Una tienda de comentarios (abreviada)
var CHANGE_EVENT = 'change';
var _comments = {};
function createComment ( data ) {
// post to server
}
var CommentStore = React.addons.update(EventEmitter.prototype, {$merge: {
// omitted methods
dispatcherIndex: AppDispatcher.register(function(payload) {
var action = payload.action;
var text;
switch(action.actionType) {
case CommentConstants.ADD_COMMENT:
AppDispatcher.waitFor([SessionStore.dispatchToken])
createComment(action.data);
break;
}
return true;
})
}});
Y una tienda para manejar sesiones (también abreviada):
var CHANGE_EVENT = 'change';
function ensureCurrentUser () {
if ( !SessionStore.currentUser() ) {
app.router.navigate('/login');
}
}
var SessionStore = React.addons.update(EventEmitter.prototype, {$merge: {
// omitted code
currentUser: function () {
return app.context.current_user;
},
dispatchToken: AppDispatcher.register(function ( payload ) {
var action = payload.action;
switch(action.actionType) {
case CommentConstants.ADD_COMMENT:
ensureCurrentUser();
break;
}
return true;
})
}});
Mi pensamiento inicial fue que este es un caso para Flux'swaitFor()
método. Sin embargo, la implementación anterior falla, ya quewaitFor
cierra el bucle de dependencia tan pronto comoSessionStore.dispatchToken
está configurado (tan pronto comoensureCurrentUser
devoluciones).
¿Es este un caso donde la carga útil debe pasarse aensureCurrentUser
y luego en el controlador de ruta para/login
? ¿Cuál es la forma en que Flux maneja este tipo de flujos?
Gracias por adelantado :)