React-redux connect HOC как декоратор класса, @connect - PullRequest
Новая
       29

React-redux connect HOC как декоратор класса, @connect

0 голосов
/ 02 октября 2018

У меня есть компонент, обернутый с использованием ES + предложенного синтаксиса декоратора форма подключения к Response-Redux HOC: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import RegisterForm from './register-form';
import { registerUser } from '../store/api/Auth/actions';

@connect(null, { registerUser: registerUser })
export default class RegisterPage extends Component {
  handleSubmit = values =>
    this.props.registerUser(values);

  render() {
    return (
      <div>
        <h1>Register Here</h1>
        <RegisterForm onSubmit={this.handleSubmit} />
      </div>
    );
  }
}

Я получаю и ошибка: 

Uncaught Error: You must pass a component to the function returned by connect. Instead received {"kind":"class","elements":[{"kind":"field","key":"handleSubmit","placement":"own","descriptor":{"configurable":true,"writable":true,"enumerable":false}},{"kind":"method","key":"render","placement":"prototype","descriptor":{"writable":true,"configurable":true,"enumerable":false}}]}

Я использую Webpack 4 с babel-loader.Мой файл .babelrc: 

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }]
    ]
}

Мне кажется, что целевым объектом функции connect является класс, но функция connect получает дескрипторы свойств этого класса.Я понимаю, что декораторы не одобряются командами React и Redux.Это связанный вопрос SO: Синтаксическая ошибка React-Redux @connect

Как заставить работать декоратор @connect?

1 Ответ

0 голосов
/ 26 декабря 2018

Убедитесь, что вы вставили плагин декоратора перед свойствами класса плагина 

{
  "plugins": [
    "@babel/plugin-proposal-decorators",
    "@babel/plugin-proposal-class-properties"
  ]
}

babel-plugin-Предложение-декораторы

...