Created
February 13, 2017 02:28
-
-
Save stefensuhat/12333a6196f7ade7b022927a7bb2fdff to your computer and use it in GitHub Desktop.
Redux Saga Error
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // store.js | |
| import { createStore, applyMiddleware } from 'redux'; | |
| import { routerMiddleware } from 'react-router-redux'; | |
| import createSagaMiddleware from 'redux-saga'; | |
| import rootReducer from './reducers'; | |
| import rootSaga from './sagas'; | |
| const sagaMiddleware = createSagaMiddleware(); | |
| export default function configureStore(initialState = {}, history) { | |
| const store = createStore(rootReducer, initialState, applyMiddleware(sagaMiddleware, routerMiddleware(history))); | |
| // Extensions | |
| sagaMiddleware.run(rootSaga); | |
| return store; | |
| } | |
| //actions.js | |
| import { AUTH_USER, AUTH_ERROR, SENDING_REQUEST, AUTH_REQUEST } from './constants'; | |
| export function sendingRequest() { | |
| return { type: SENDING_REQUEST }; | |
| } | |
| export function authRequest(data) { | |
| return { type: AUTH_REQUEST, data }; | |
| } | |
| export function loginUser(user) { | |
| return { type: AUTH_USER, user }; | |
| } | |
| export function authError(error) { | |
| return { type: AUTH_ERROR, error }; | |
| } | |
| // loginSagas.js | |
| import { put, call } from 'redux-saga/effects'; | |
| import axios from 'axios'; | |
| import * as actions from './actions'; | |
| const url = 'http://example.dev'; | |
| export function* doSignIn() { | |
| try { | |
| yield put(actions.sendingRequest); | |
| const { email, password } = yield put(actions.authRequest); | |
| const signin = yield call(axios.post, url, { email, password }); | |
| yield put(actions.loginUser(signin)); | |
| } catch (err) { | |
| yield put(actions.authError(err)); | |
| } | |
| } | |
| // rootSaga.js | |
| import { takeLatest } from 'redux-saga/effects'; | |
| import { doSignIn } from 'containers/Login/loginSagas'; | |
| import * as actions from 'containers/Login/actions'; | |
| function* rootSaga() { | |
| yield [ | |
| takeLatest(actions.authRequest, doSignIn), | |
| ]; | |
| } | |
| export default rootSaga; | |
| // componentLogin.js | |
| import React, { Component } from 'react'; | |
| import { Field, reduxForm } from 'redux-form'; | |
| import { connect } from 'react-redux'; | |
| import { authRequest } from './actions'; | |
| import Button from 'components/Button'; | |
| class Login extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| buttonState: 'false', | |
| }; | |
| this.handleFormSubmit = this.handleFormSubmit.bind(this); | |
| } | |
| handleFormSubmit({ email, password }) { | |
| this | |
| .props | |
| .authRequest(email, password); | |
| } | |
| toggle() { | |
| console.log(this.props); | |
| } | |
| render() { | |
| const { handleSubmit } = this.props; | |
| return ( | |
| <div> | |
| <div className="content overflow-hidden"> | |
| <div className="row"> | |
| <div className="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" > | |
| <div className="block block-themed animated fadeIn"> | |
| <div className="block-header bg-primary"> | |
| <h3 className="block-title">Login</h3> | |
| </div> | |
| <div className="block-content block-content-full block-content-narrow"> | |
| <h1 className="h2 font-w600 push-30-t push-5">FreshBox</h1> | |
| <p>Welcome, please login.</p> | |
| <form | |
| className="form-horizontal push-30-t push-50" | |
| onSubmit={handleSubmit(this.handleFormSubmit)} | |
| > | |
| <div className="form-group"> | |
| <div className="col-xs-12"> | |
| <div className="form-material form-material-primary"> | |
| <Field | |
| component="input" | |
| className="form-control" | |
| type="text" | |
| id="email" | |
| placeholder="user@fresbox.com" | |
| name="email" | |
| /> | |
| <label htmlFor="email">Email</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="form-group"> | |
| <div className="col-xs-12"> | |
| <div className="form-material form-material-primary"> | |
| <Field | |
| component="input" | |
| className="form-control" | |
| type="password" | |
| placeholder="password" | |
| id="password" | |
| name="password" | |
| /> | |
| <label htmlFor="password">Password</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="form-group"> | |
| <div className="col-xs-12 col-sm-6 col-md-4"> | |
| <Button | |
| action="submit" | |
| text="Login" | |
| className="btn btn-block btn-primary" | |
| state={this.props.authenticating} | |
| /> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="push-10-t text-center animated fadeInUp"> | |
| <small className="text-muted font-w600"> | |
| 2017 © FreshBox</small> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| } | |
| function mapStateToProps(state) { | |
| const { authenticating } = state.auth; | |
| return { authenticating }; | |
| } | |
| Login = reduxForm({ | |
| form: 'loginForm', | |
| })(Login); | |
| export default connect(mapStateToProps, { authRequest })(Login); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment