React&Redux:简单的异步登录

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
);

containers/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);

components/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;

actions/actions.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

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

• redux-thunk
• redux-promise

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