获取

Question

尝试使用Reducers和Actions进行简单登录，看看反应是如何起作用的，我创建了一个组件。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import Empty from '../Layouts/Empty';
import { Button } from '../UI/Button';
import Loading from '../Helpers/Loading';
import { actionCreators } from '../../actions';
import Notifications, {notify} from 'react-notify-toast';

class LoginForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        email: '',
        password: '',
        isLoading: false
    };
    this.onChange = this.onChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange(e) {
      this.setState({ [e.target.name]: e.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ isLoading: true });
    this.props.dispatch(actionCreators.login(this.state));
    console.log(this.props.isFetching);
    console.log(this.props.error);
    console.log(this.props.auth);
  }

  render() {

    const {email, password, isLoading} = this.state;  
    return (
            <Empty>
                <div className='main'>
                    <Notifications />                    
                </div>
                <h1>Welcome Again</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label>Email</label>
                        <input type="email" placeholder="email@domain.com" name="email" value={email} className="form-control" onChange={this.onChange}/>
                    </div>
                    <div className="form-group">
                        <label>Password</label>
                        <input type="password" placeholder="***********" name="password" value={password}  className="form-control" onChange={this.onChange} />
                    </div>
                    <div className="form-group form-group-button">                    
                        <button type="submit" className="button button-primary button-right button" style={{width: "100%"}} disabled={isLoading}>LOGIN</button>
                    </div>
                </form>
                <div className="form-description">
                    <Button to='#' classes="button-block button-google">Login using Google+</Button>
                    <Button to='#' classes="button-block button-facebook">Login using Facebook</Button>
                </div>
            </Empty>
    );
  }
}


LoginForm.propTypes = {
    dispatch: PropTypes.func,
    isFetching: PropTypes.bool.isRequired,
    error: PropTypes.bool.isRequired,
    auth: PropTypes.bool.isRequired
};

export default connect((store) => {
    return {
        isFetching: store.loginState.isFetching,
        error: store.loginState.error,
        auth: store.loginState.auth
  };
})(LoginForm)

我的减速机：

import { FETCHING_AUTH_SUCCESS, FETCHING_AUTH_FAILURE, FETCHING_AUTH } from '../actions/types';

const initialState = {
    data: [],
    dataFetched: false,
    isFetching: false,
    error: false,
    auth: false
}

export default function loginReducer(state = initialState, action) {
    switch (action.type) {
        case FETCHING_AUTH:
            return {
            ...state,
            isFetching: true,
            error: false,
            auth: false
            }
        case FETCHING_AUTH_FAILURE:
            return {
            ...state,
            isFetching: false,
            error: true,
            auth: false
            }
        case FETCHING_AUTH_SUCCESS:
            return {
            isFetching: false,
            dataFetched: true,
            data: action.data,
            error: false,
            auth: true
            }
        default:
            return state
    }
}

我的行动：

import axios from 'axios';
import * as types from './types';

export function login(data) {
  return (dispatch) => {
    dispatch({
      type: types.FETCHING_AUTH
    });
    fetch('MY_URL', {
        method: 'post',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      .then((response) => response.json())
      .then((response) => {
        if(response.token != ""){
          dispatch({
            type: types.FETCHING_AUTH_SUCCESS,
            data: response,
            error: false,
            auth: true
          });
        }

      }).catch((response) => {
        dispatch({
          type: types.FETCHING_AUTH_FAILURE,
          data: response,
          error: true,
          auth: false
        });
      });
  }
}

当我提交表格时，数据POST正确，我得到了答复。 我的问题是在reducer中我有FETCHING_AUTH_SUCCESS和params：

return {
            isFetching: false,
            dataFetched: true,
            data: action.data,
            error: false,
            auth: true
            }

如果我打印对象没关系，但我怎样才能得到＃＆＃34; auth＆＃34;这是真的吗？ 因为当我提交表单并在处理程序上打印atributes。

console.log(this.props.isFetching);
console.log(this.props.error);
console.log(this.props.auth);

当我认为可能是＆＃34; true＆＃34;它总是返回false。我想表明登录确实成功了。

我缺少什么？

的问候。

Answer 1

在下面的代码中，login操作为async。所以道具不会同步更新。

this.props.dispatch(actionCreators.login(this.state));
console.log(this.props.isFetching);
console.log(this.props.error);
console.log(this.props.auth);

一旦调度FETCHING_AUTH_SUCCESS并且组件收到新道具，它就会被反映出来。