Trello clone with Phoenix and React (第四章节)

这篇文章属于基于Phoenix Framework 和React的Trello系列

用户注册

上一章节，我们创建了User模型，并完成了相关验证以及加密密码等变更，同时更新了路由文件，创建了RegistrationControlle以便于处理新用户请求和返回验证需要的 JSON数据以及 jwt token。现在让我们转移到前端这边。

准备Recat路由

我们的主要目标拥有两种公共路由，一种是/sign_in和/sign_up，任何访问者将能够通过他们登录到应用程序或这注册新的用户帐户。

另一方面我们需要/作为根路由，用于显示所有属于用户的卡片，而/boards/:id路由用于显示用户所选择的开片。访问最后两个路由，用户必须是验证过的，否则，我们将他重定向到注册页面。

让我们更新react-router路由文件，如下所示：

  1. // web/static/js/routes/index.js
  3. import { IndexRoute, Route }        from 'react-router';
  4. import React                        from 'react';
  5. import MainLayout                   from '../layouts/main';
  6. import AuthenticatedContainer       from '../containers/authenticated';
  7. import HomeIndexView                from '../views/home';
  8. import RegistrationsNew             from '../views/registrations/new';
  9. import SessionsNew                  from '../views/sessions/new';
  10. import BoardsShowView               from '../views/boards/show';
  12. export default (
  13.   <Route component={MainLayout}>
  14.     <Route path="/sign_up" component={RegistrationsNew} />
  15.     <Route path="/sign_in" component={SessionsNew} />
  17.     <Route path="/" component={AuthenticatedContainer}>
  18.       <IndexRoute component={HomeIndexView} />
  20.       <Route path="/boards/:id" component={BoardsShowView} />
  21.     </Route>
  22.   </Route>
  23. );

复杂的部分是AuthenticatedContainer,让我们看看:

  1. // web/static/js/containers/authenticated.js
  3. import React        from 'react';
  4. import { connect }  from 'react-redux';
  5. import { routeActions } from 'redux-simple-router';
  7. class AuthenticatedContainer extends React.Component {
  8.   componentDidMount() {
  9.     const { dispatch, currentUser } = this.props;
  11.     if (localStorage.getItem('phoenixAuthToken')) {
  12.       dispatch(Actions.currentUser());
  13.     } else {
  14.       dispatch(routeActions.push('/sign_up'));
  15.     }
  16.   }
  18.   render() {
  19.     // ...
  20.   }
  21. }
  23. const mapStateToProps = (state) => ({
  24.   currentUser: state.session.currentUser,
  25. });
  27. export default connect(mapStateToProps)(AuthenticatedContainer);

在这里我们主要做的是，当组件mount时，检测在当前浏览器是否本地存储有 jwt token。后面我们将看到如何设置它，但现在，让我们试想一下，它不存在，这要感谢redux-simple-router库将用户重定向到注册页面。

注册视图组件

一旦发现他没有通过验证，我们将呈现给用户：

  1. // web/static/js/views/registrations/new.js
  3. import React, {PropTypes}   from 'react';
  4. import { connect }          from 'react-redux';
  5. import { Link }             from 'react-router';
  7. import { setDocumentTitle, renderErrorsFor } from '../../utils';
  8. import Actions              from '../../actions/registrations';
  10. class RegistrationsNew extends React.Component {
  11.   componentDidMount() {
  12.     setDocumentTitle('Sign up');
  13.   }
  15.   _handleSubmit(e) {
  16.     e.preventDefault();
  18.     const { dispatch } = this.props;
  20.     const data = {
  21.       first_name: this.refs.firstName.value,
  22.       last_name: this.refs.lastName.value,
  23.       email: this.refs.email.value,
  24.       password: this.refs.password.value,
  25.       password_confirmation: this.refs.passwordConfirmation.value,
  26.     };
  28.     dispatch(Actions.signUp(data));
  29.   }
  31.   render() {
  32.     const { errors } = this.props;
  34.     return (
  35.       <div className="view-container registrations new">
  36.         <main>
  37.           <header>
  38.             <div className="logo" />
  39.           </header>
  40.           <form onSubmit={::this._handleSubmit}>
  41.             <div className="field">
  42.               <input ref="firstName" type="text" placeholder="First name" required={true} />
  43.               {renderErrorsFor(errors, 'first_name')}
  44.             </div>
  45.             <div className="field">
  46.               <input ref="lastName" type="text" placeholder="Last name" required={true} />
  47.               {renderErrorsFor(errors, 'last_name')}
  48.             </div>
  49.             <div className="field">
  50.               <input ref="email" type="email" placeholder="Email" required={true} />
  51.               {renderErrorsFor(errors, 'email')}
  52.             </div>
  53.             <div className="field">
  54.               <input ref="password" type="password" placeholder="Password" required={true} />
  55.               {renderErrorsFor(errors, 'password')}
  56.             </div>
  57.             <div className="field">
  58.               <input ref="passwordConfirmation" type="password" placeholder="Confirm password" required={true} />
  59.               {renderErrorsFor(errors, 'password_confirmation')}
  60.             </div>
  61.             <button type="submit">Sign up</button>
  62.           </form>
  63.           <Link to="/sign_in">Sign in</Link>
  64.         </main>
  65.       </div>
  66.     );
  67.   }
  68. }
  70. const mapStateToProps = (state) => ({
  71.   errors: state.registration.errors,
  72. });
  74. export default connect(mapStateToProps)(RegistrationsNew);

对于这个组件，不想多的太多，当它加载的时候，改变了document标题，同时呈现给注册表单并dispatch注册登记 action creator的结果。

Action creator

当前面的表单确认后，我们想把数据发送到服务器并处理：

  1. // web/static/js/actions/registrations.js
  3. import { pushPath }  from 'redux-simple-router';
  4. import Constants     from '../constants';
  5. import { httpPost }  from '../utils';
  7. const Actions = {};
  9. Actions.signUp = (data) => {
  10.   return dispatch => {
  11.     httpPost('/api/v1/registrations', {user: data})
  12.     .then((data) => {
  13.       localStorage.setItem('phoenixAuthToken', data.jwt);
  15.       dispatch({
  16.         type: Constants.CURRENT_USER,
  17.         currentUser: data.user,
  18.       });
  20.       dispatch(pushPath('/'));
  21.     })
  22.     .catch((error) => {
  23.       error.response.json()
  24.       .then((errorJSON) => {
  25.         dispatch({
  26.           type: Constants.REGISTRATIONS_ERROR,
  27.           errors: errorJSON.errors,
  28.         });
  29.       });
  30.     });
  31.   };
  32. };
  34. export default Actions;

当RegistrationsNew组件调用action creator传递表单数据，新的POST请求发送到服务器。请求首先被Phoenix路由过滤，并由RegistrationController处理（上一章节创建的）。如果成功，将返回jwt token，并存储到localStorage中，创建的用户数据将dispatch到CURRENT_USER动作中，最后重定向用户到根路由页面。相反，注册数据有任何错误，将产生REGISTRATIONS_ERROR动作与错误，最终就可以以表格呈现给用户。

为了处理这些http请求，我们将借助于isomorphic-fetch包来处理这些utils文件，其中一些有助于完成这个目的。

  1. // web/static/js/utils/index.js
  3. import React        from 'react';
  4. import fetch        from 'isomorphic-fetch';
  5. import { polyfill } from 'es6-promise';
  7. export function checkStatus(response) {
  8.   if (response.status >= 200 && response.status < 300) {
  9.     return response;
  10.   } else {
  11.     var error = new Error(response.statusText);
  12.     error.response = response;
  13.     throw error;
  14.   }
  15. }
  17. export function parseJSON(response) {
  18.   return response.json();
  19. }
  21. export function httpPost(url, data) {
  22.   const headers = {
  23.     Authorization: localStorage.getItem('phoenixAuthToken'),
  24.     Accept: 'application/json',
  25.     'Content-Type': 'application/json',
  26.   }
  28.   const body = JSON.stringify(data);
  30.   return fetch(url, {
  31.     method: 'post',
  32.     headers: headers,
  33.     body: body,
  34.   })
  35.   .then(checkStatus)
  36.   .then(parseJSON);
  37. }
  39. // ...

Reducers

最后的步骤是处理这些带reducers动作返回的结果，因此我们创建了程序需要的状态树。首先，让我们看看session reducer，用于设置currentUser:

  1. // web/static/js/reducers/session.js
  3. import Constants from '../constants';
  5. const initialState = {
  6.   currentUser: null,
  7. };
  9. export default function reducer(state = initialState, action = {}) {
  10.   switch (action.type) {
  11.     case Constants.CURRENT_USER:
  12.       return { ...state, currentUser: action.currentUser };
  14.     default:
  15.       return state;
  16.   }
  17. }

在这种情况下，任何注册错误都会更新状态，同时显示给用户。让我们添加注册reducer:

  1. // web/static/js/reducers/registration.js
  4. import Constants from '../constants';
  6. const initialState = {
  7.   errors: null,
  8. };
  10. export default function reducer(state = initialState, action = {}) {
  11.   switch (action.type) {
  12.     case Constants.REGISTRATIONS_ERROR:
  13.       return {...state, errors: action.errors};
  15.     default:
  16.       return state;
  17.   }
  18. }

注意：我们从utils文件中调用renderErrorsFor函数用于显示错误：

  1. // web/static/js/utils/index.js
  3. // ...
  5. export function renderErrorsFor(errors, ref) {
  6.   if (!errors) return false;
  8.   return errors.map((error, i) => {
  9.     if (error[ref]) {
  10.       return (
  11.         <div key={i} className="error">
  12.           {error[ref]}
  13.         </div>
  14.       );
  15.     }
  16.   });
  17. }

这就是所有的注册过程。下一章节，我们将看到已存在的用户如何登录，并且访问个人的内容。同样，别忘记查看运行演示和下载最终的源代码：

演示 源代码