I start with React and Redux, and I'm trying to set up a very simple login form and redirect. I will add a later router or react router.
I really do not understand where I should put my "logical code" (ajax call and redirection).
Here is what I wrote.
index.js (entry point):
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 );
container / 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 } }
at this link: http://redux.js.org/docs/advanced/AsyncActions.html I hesitate to write my login in the reducer (but I think the purpose of the reducer is to simply reduce the state object) or create some actions with one “main” action that calls REQUEST_LOGIN and LOGIN_SUCCES / LOGIN_FAILURE , for example.
Thanks.