javascript - react & 归零 : simple async login

Question

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

我真的不明白我必须在哪里放置我的“逻辑代码”(ajax 调用和重定向)。

这是我写的。

index.js(入口点):

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import rootReducer from './reducers/reducers'

let store = createStore(rootReducer);
let rootElement = document.getElementById('root');

render(
   <Provider store={store}>
      <App />
   </Provider>,
   rootElement
);

容器/App.js :

import { Component } from 'react'
import { connect } from 'react-redux'
import { login } from '../actions/actions'
import LoginForm from '../components/LoginForm'

class App extends Component {
   render () {
      const { dispatch } = this.props;

      return (
         <div>
            <LoginForm onSubmit={(id, pass) =>
               dispatch(login(id, pass))
            } />
         </div>
      )
   }
}

const mapStateToProps = (state) => {
   return {

   }
};
const mapDispatchToProps = (dispatch) => {
   return {

   }
};
export default connect(mapStateToProps)(App);

组件/LoginForm.js :

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;

reducers/root.js :

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

const rootReducer = combineReducers({
   user
});

export default rootReducer;

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;

Action / Action .js :

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

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

点击此链接:http://redux.js.org/docs/advanced/AsyncActions.html我犹豫是在 reducer 中编写我的登录内容(但我认为 reducer 的目的只是为了减少状态对象)还是使用一个调用 REQUEST_LOGIN 和 LOGIN_SUCCES 的“主要”操作创建多个操作/LOGIN_FAILURE 例如。

谢谢。

Answer 1

你是对的，reducer 只是将数据映射到状态。在 Action 创建器中创建您的异步逻辑。关键是使用存储增强器使异步操作成为可能。

• redux-thunk
• redux-promise

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