React & Redux: простой async login

Question

Я начинаю с React & Redux, и я пытаюсь настроить очень простую форму для входа & redirection. Я добавлю позже ответный маршрутизатор или реактивный маршрутизатор-редукт.

Я действительно не понимаю, где я должен поставить свой «логический код» (вызов 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; 

редукторы/root.js :

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

const rootReducer = combineReducers({ 
    user 
}); 

export default rootReducer; 

редукторы/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.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 стесняюсь между написать мой логин вещи внутри редуктора (но я думаю, редуктора цель - просто уменьшить объект состояния) или создать несколько действий с одним «основным» действием, которое вызывает, например, REQUEST_LOGIN и LOGIN_SUCCES/LOGIN_FAILURE.

Спасибо.

Answer 1

Вы правы, редукторы предназначены только для отображения данных в состояние. Создайте свою асинхронную логику в создателе действия. Ключ должен использовать усилитель магазина, чтобы сделать асинхронные действия возможными.

• redux-thunk
• redux-promise

Учебник по асинхронным Redux можно найти в redux documentation.