我目前有一个非常简单的React应用程序,它使用state来确定几个视图。单击submit元素将触发对通过登录或注册凭据的端点的简单调用。我可以继续沿着这条路走下去,使用从服务器返回的React和JSON来确定我的观点,但我知道处理数据的方式不合适。
我的问题是,从这里开始,如何使用Flummox实现Flux模式?我是否使用有效负载触发操作并在操作或商店中进行API调用?我正在尝试理解从我的UI中的操作到我的API调用进行此往返的正确方法,以获取响应和UI响应商店中的更改。
以下是我的Auth组件的代码。我希望看到一个如何在这种情况下使用Flummox的示例,这样我就可以理解扩展和添加功能所需的内容。
Auth.jsx
'use strict';
var React = require('react');
var request = require('request');
var Auth = React.createClass({
getInitialState: function() {
return {
name: '',
email: '',
pass: '',
passConfirm: '',
login: true,
register: false
};
},
handleLogin: function(){
this.setState({
login: true,
register: false
});
},
handleRegister: function(){
this.setState({
register: true,
login: false
});
},
handleName: function(event){
this.setState({
name: event.target.value
});
},
handleEmail: function(event){
this.setState({
email: event.target.value
});
},
handlePass: function(event){
this.setState({
pass: event.target.value
});
},
handlePassConfirm: function(event){
this.setState({
passConfirm: event.target.value
});
},
handleSubmit: function(){
var register = {
name: this.state.name,
email: this.state.email,
password: this.state.pass,
confirmPassword: this.state.passConfirm
};
var endpoint = 'http://localhost:3000';
request({
uri: endpoint + '/register',
method: 'POST',
json: register
}, function(error, response, body){
if (error) {
console.log(error);
} else {
console.log(response);
}
});
},
renderLogin: function () {
return (
<form className="login">
<div className="input-container">
<input type='text' value={this.state.email} onChange={this.handleEmail} placeholder="email" />
<input type='password' value={this.state.password} onChange={this.handlePass} placeholder="password" />
</div>
<div className="auth-submit" onClick={this.handleSubmit}>Login</div>
</form>
);
},
renderRegister: function(){
return (
<form className="register">
<div className="input-container">
<input type='text' value={this.state.name} onChange={this.handleName} placeholder="name" />
<input type='email' value={this.state.email} onChange={this.handleEmail} placeholder="email" />
<input type='password' value={this.state.pass} onChange={this.handlePass} placeholder="password" />
<input type='password' value={this.state.passConfirm} onChange={this.handlePassConfirm} placeholder="confirm password" />
</div>
<div className="auth-submit" onClick={this.handleSubmit}>Register</div>
</form>
);
},
render: function(){
var auth = null;
if (this.state.login) {
auth = this.renderLogin();
} else if (this.state.register) {
auth = this.renderRegister();
}
return (
<div className="auth-container">
<div className="auth-logo">Flow</div>
{auth}
<div className="auth-select">
<div className="auth-label-container">
<div className="auth-label" onClick={this.handleLogin}>Login</div>
</div>
<div className="auth-label-container">
<div className="auth-label" onClick={this.handleRegister}>Register</div>
</div>
</div>
</div>
);
},
});
module.exports = Auth;
答案 0 :(得分:12)
在深入了解Flux之前,我建议您清理现有的React代码。
首先,我会尝试尽可能减少组件自身的状态。例如,不是为login
和register
设置单独的状态,而是可以有一个screen
作为状态,它接受您正在渲染的实际屏幕/视图的字符串值(登录/寄存器)。
此外,每个renderLogin()
和renderRegister()
作为组件都会更好。因此,您的Auth
组件最终将成为控制器视图。
表单处理在同一时间看起来过于冗长:您已为每个字段定义了单独的处理程序,但单个handleChange()
就足够了(您可以在输入元素中设置name="<state-field-name>"
以引用您正在引用的州字段。
您可以使用Flummox开始构建光通量模式,并将应用状态(而非本地组件状态)移动到商店中。
我假设您有read the docs,但作为摘要,Flummox提供Store
和Action
帮助程序来模拟应用程序的数据(事实来源)和UI操作。
动作模块看起来像这样:
import { Actions } from 'flummox';
export default class AuthActions extends Actions {
gotoScreen(screenName) {
return screenName;
}
register(requestBody) {
// Here you deal with your authentication API,
// make async requests and return a promise.
// This part is specific to your backend.
return AuthAPI.register(requestBody)
.then(
(value) => Promise.resolve(value),
(reason) => Promise.reject(reason)
);
}
}
AuthStore
将成为事实的来源,即处理实际的应用状态。这会注册操作,因此它知道在操作发生更改时如何更新自身。
import { Store } from 'flummox';
export default class AuthStore extends Store {
constructor(flux) {
super();
let authActions = flux.getActions('auth');
// Here you register the functions which will take care
// of handling the actions and update the store's state.
// These can be sync or async.
this.register(authActions.gotoScreen, this.handleGotoScreen);
this.registerAsync(authActions.register, this.handleRegisterBegin,
this.handleRegisterSuccess,
this.handleRegisterError);
// This is the initial state of your flux store
this.state = {
screen: 'login',
// ... any extra state your app might need
};
}
/* Screen handling */
handleGotoScreen(screenName) {
this.setState({screen: screenName});
}
/* Register */
handleRegisterBegin(requestBody) {
this.setState({
// change state based on action
});
}
handleRegisterSuccess() {
this.setState({
// change state based on action
});
}
handleRegisterError(errors) {
this.setState({
// change state based on action
});
}
}
这些需要封装在Flux
对象中,然后可以在应用中的任何位置引用它。
import { Flummox } from 'flummox';
import AuthActions from './AuthActions';
import AuthStore from './AuthStore';
export default class Flux extends Flummox {
constructor() {
super();
this.createActions('auth', AuthActions);
this.createStore('auth', AuthStore, this);
}
}
但您的观点如何了解商店的状态? preferred way将商店与视图粘合在一起是使用FluxComponent
,FluxComponent
会在使用RETableViewManager时通过道具接收商店的状态。
FluxComponent
会收到您应用的Flux
对象的实例,您还需要指定要连接的商店。
import Flux from './Flux';
let flux = new Flux();
<FluxComponent flux={flux} connectToStores={['auth']}>
<Auth />
</FluxComponent>
状态作为道具传递,您可以直接引用这些值,就像通常使用道具一样。
同时,这允许访问底层视图中的flux
道具,这使我们可以访问操作,因此能够在用户交互发生时触发它们:
// You can fire actions from anywhere in your component
this.props.flux.getActions('auth').gotoScreen('register')
完成(或开始)通量循环。