javascript - 使用 redux 和 react.js 时 props.actions `undefined`

Question

我正在关注此链接中的教程:http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/ 但是当 handleSubmit() 函数被触发时，我得到一个错误:

TypeError: Cannot read property 'logInUser' of undefined

确实，当我尝试记录 this.props.actions 时，它是未定义的，但我不明白为什么。有什么东西不见了吗？ 我使用 Antd 作为 UI 框架。

组件

import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import {bindActionCreators} from 'redux';  
import {connect} from 'react-redux';  
import * as sessionActions from './actions/sessionActions';

const FormItem = Form.Item;

class Login extends Component {
  constructor(props){
    super(props);
    this.state = {credentials: {username: '', password: ''}};
    this.handleSubmit = this.handleSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  onChange(event) {
    const field = event.target.name;
    const credentials = this.state.credentials;
    credentials[field] = event.target.value;;
    return this.setState({credentials: credentials});
  }

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        //console.log(this.props.actions);
        this.props.actions.logInUser(this.state.credentials);
      }
    });
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    return (
        <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'username missing!' }],
          })(
          <Input 
              name="username"
              value={this.state.credentials.username} 
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
              placeholder="Username o email"
              onChange={this.onChange}/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Password missing!' }],
          })(
          <Input 
            name="password"
            value={this.state.credentials.password}
            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} 
            type="password" 
            placeholder="Password"
            onChange={this.onChange}/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: false,
            })(
              <Checkbox>Ricordami</Checkbox>
            )}
          <Button type="primary" htmlType="submit" className="login-form-button">
          Log in
          </Button>
        </FormItem>
        </Form>
    );
  }
}


const mapDispatchToProps = (dispatch) => {  
  return {
    actions: bindActionCreators(sessionActions, dispatch)
  };
}


export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);

sessionReducer.js

import * as types from '../actions/actionTypes';  
import initialState from './initialState';  

export default function sessionReducer(state = initialState.session, action) {  
  switch(action.type) {
    case types.LOG_IN_SUCCESS:
      this.context.history.push('/')
      return !!sessionStorage.jwt
    default: 
      return state;
  }
}

sessionActions.js

import * as types from './actionTypes';  
import sessionApi from '../api/sessionApi';

export function loginSuccess() {  
  return {type: types.LOG_IN_SUCCESS}
}

export function logInUser(credentials) {  
  return function(dispatch) {
    return sessionApi.login(credentials).then(response => {
      sessionStorage.setItem('jwt', response.jwt);
      dispatch(loginSuccess());
    }).catch(error => {
      throw(error);
    });
  };
}

更新 我在@Chaim Friedman 的帮助下解决了这个问题，但现在我遇到了另一个错误:

Error: Actions must be plain objects. Use custom middleware for async actions.

但我使用 redux-thunk 作为中间件。如果有帮助，这里是登录功能:

sessionApi.js

import React from 'react'

var axios = require('axios');
var qs = require('qs');

class SessionApi {  

  static login(credentials){
    axios.post('http://localhost:5000/login', qs.stringify({auth: credentials}))
      .then(response => {
        console.log(response);
        return response.json();
      }),
      error => {
        console.log(error);
        return error;
      };
  }
}

Answer 1

我相信您的问题出在此处。

export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);

您只是导出 Form.create() 返回的内容，因此您的组件实际上并未连接到 redux。

要解决此问题，您需要执行以下操作。

export default Form.create(connect(null, matchDispatchToProps)(Login));

确切的语法有所不同，这取决于 Form.create() 的用法，但这是基本思想。