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

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

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 }]
    ]
}

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

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

Как вы отметили, мы действительно не рекомендуем использовать декораторы в целом, и в частности использовать connect в качестве декоратора. Синтаксис декоратора и плагины все еще нестабильны и продолжают меняться.

markerikson 02.10.2018 17:49

@markerikson Спасибо за ответ. Видя, как другие используют его, мне любопытно, что мне не хватает, чтобы заставить его работать.

Drew2 02.10.2018 18:48

Это постоянно меняющийся ландшафт. Если вы так склонны использовать что-то, что официально не поддерживается, вам нужно приложить дополнительные усилия. Вам нужно будет найти версию babel-plugin-transform-decorators (или -legacy), которая может заставить эту работу работать. Возможно, вам также придется найти соответствующие версии других плагинов babel, которые могут работать в экосистеме что. Однако преследование этой идеи полезно для науки, так что удачи! :)

Mrchief 01.11.2018 03:20
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
3
919
1

Ответы 1

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

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

Вавилон-плагин-предложение-декораторы

Пожалуйста, добавьте некоторую информацию / описание / контекст о связанном ресурсе

SanSolo 26.12.2018 03:58

Тем не менее, я получаю дескриптор как первый и единственный параметр функции декоратора.

Zydnar 05.04.2019 13:31

Другие вопросы по теме