bindActionCreators, @connect в React-Redux и понимание кода

Question

Я пытался понять этот код на github

Здесь они, программист, использовали что-то вроде этого

 constructor(props) {
    super(props);
    this.actions = bindActionCreators(Actions, this.props.dispatch);
  }

Вопрос 1: Здесь this.actions = bindActionCreators(Actions, this.props.dispatch); не имеет смысла для меня

Кроме того, это не основной вопрос, но откуда я выучил React-redux, мы использовали для подключения компонента, подобного этому

export default connect(mapStateToProps, 
  {fetchCoin, 
    updateCrypto, 
    CurrencyRate,
    CurrencyState
  })(cryptoTicker);

В приведенном выше фрагменте кода программист сделал что-то вроде этого

@connect(state => {
  return {
    score: state.game.get("score"),
    result: state.game.get("result")
  };
})

Вопрос 2: ** Что опять-таки выглядит мне чуждо (как у меня несколько месяцев опыта использования js, но этоэто первый раз, когда я сталкиваюсь с **@) Так может кто-нибудь объяснить, пожалуйста, что такое @ в целом в JS?

И, наконец, он объявил две функции, которыеменя вызывают onclick после оператора возврата класса

 _handleNewGame = () => {
    this.actions.initGame();
  }

  /**
   * Save the current game`s state.
   */
  _handleSaveGame = () => {
    this.actions.saveGame();
  }

Теперь, поскольку я все еще относительно новичок в JS и реагирую, у меня есть два вопроса к этой части

Вопрос 3: Можем ли мы создать функцию внутри класса после возвратаи сделать?Если да, то не было бы хорошей практикой (в целом) создавать функцию перед рендерингом, где все другие функции объявлены?

Answer 1

Для вопросов № 1 и № 2 ваш синтаксис «@connect» и «connect (mapStateToProps, ...) (cryptoTicker)» эквивалентен.Символ @ указывает синтаксическому анализатору, что мы используем декоратор для нашей функции, функции connect (...), и выводит тот же класс, в данном случае Game, но с добавленной функциональностью.Это называется шаблоном проектирования HoC (компоненты более высокого порядка), и вы можете прочитать об этом подробнее здесь https://medium.com/@mappmechanic/react-utility-higher-order-components-as-decorators-tc39-stage-2-9e9f3a17688a

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