Javascript 反应&；Redux：简单异步登录

我是React&Redux的初学者，我正在尝试设置一个非常简单的登录表单&重定向。 稍后我将添加react router或react router redux

我真的不明白我必须把我的“逻辑代码”（ajax调用和重定向）放在哪里

这是我写的

index.js（入口点）：

reducers/user.js：

import { LOGIN, BAD_LOGIN, LOGOUT } from '../actions/actions'

const initialState = {
   cid: null,
   username: '',
   logo: ''
};

const user = (state = initialState, action) => {
   switch (action.type) {
      case LOGIN:
         const api = new loginApi; //simple version
         api.login(action.login, action.password)
            .done(res => {
               //Right here ?
            })
            .fail(err => console.error(err));

         return state;

      case LOGOUT:
         //...
         return state;

      default:
         return state;
   }
};

export default user;

actions/actions.js：

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export function login(login, password) {
   return {
      type: LOGIN,
      login,
      password
   }
}

点击此链接： 我犹豫是在reducer中写我的登录内容（但我认为reducer的目的只是减少状态对象），还是用一个“主”操作创建多个操作，例如调用

请求登录

和

登录成功

/

登录失败

---

谢谢。

您是对的，减缩器仅用于将数据映射到状态。在action creator中创建异步逻辑。关键是使用存储增强器使异步操作成为可能

---

有关异步redux的教程可以在中找到。

感谢您的快速响应。：-）最后一个问题（我不会因为简单而创建一个新问题，但若不是那个么简单，我会）。如果id/pass无效，我想显示一个小错误。但是，仅仅为了显示消息而在状态中创建一个新的attr（如errors:[]）似乎有些过分。它是？如果是，它应该如何更新我的React presentational组件？redux的想法是将所有应用程序状态存储在存储中。因此，将错误存储在状态中应该没问题。在我们的应用程序中，我们向reducer发送一个用户登录或用户错误。我们还将错误存储在用户中，以便可以在用户缩减器中处理并更容易地映射到登录组件。好的。我不习惯那样想。存储所有数据（一开始）似乎很奇怪。我想知道React/Redux如何能像现在这样快。再次感谢！我和你一样。使用redux构建这样的系统似乎很疯狂，而且需要做很多工作。有那么多的州需要存储。。。我必须考虑每一个翻转视图，并手动编写它。我想问的是：问题。。。用户登录后，您在客户端存储了什么，以便在用户访问其他页面时能够重新进行身份验证？

import { Component, PropTypes } from 'react'

class LoginForm extends Component {
   render () {
      return (
         <div>
            <form action="#" onSubmit={(e) => this.handleSubmit(e)}>
               <input type="text" ref={node => { this.login = node }} />
               <input type="password" ref={node => { this.password = node }} />
               <input type="submit" value="Login" />
            </form>
         </div>
      )
   }

   handleSubmit(e) {
      e.preventDefault();
      this.props.onSubmit(this.login.value, this.password.value);
   }
}

LoginForm.propTypes = {
   onSubmit: PropTypes.func.isRequired
};

export default LoginForm;

import { combineReducers } from 'redux'
import user from './user'

const rootReducer = combineReducers({
   user
});

export default rootReducer;

import { LOGIN, BAD_LOGIN, LOGOUT } from '../actions/actions'

const initialState = {
   cid: null,
   username: '',
   logo: ''
};

const user = (state = initialState, action) => {
   switch (action.type) {
      case LOGIN:
         const api = new loginApi; //simple version
         api.login(action.login, action.password)
            .done(res => {
               //Right here ?
            })
            .fail(err => console.error(err));

         return state;

      case LOGOUT:
         //...
         return state;

      default:
         return state;
   }
};

export default user;

export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';

export function login(login, password) {
   return {
      type: LOGIN,
      login,
      password
   }
}