Javascript 与'反应；重组'；和'；重复周期'；。如何让它工作？

所以，我一直在玩，然后，我发现了这一点，我认为这对我的目标很好：功能性JS和反应性

问题是，当我使用HoC（重新组合）创建组件时，无法使事件侦听器工作。Ps：当我创建常规React组件时，事件侦听器工作

在RecomposeAPI中，存在一些问题，我认为这就是我的代码失败的地方。我想我需要它来让redux循环与recompose一起工作，但我无法让它工作

使用常规React组件和“redux循环”的工作示例：

由于它与常规React组件和常规redux存储（无“redux循环”）一起工作，因此我将发布HoC代码：

/* eslint no-console: ["error", { allow: ["warn", "error"] }] */

import React from 'react';
import {
  compose,
  onlyUpdateForPropTypes,
  pure,
  setObservableConfig,
  setPropTypes,
  withReducer,
  withPropsOnChange,
} from 'recompose';
import xstreamConfig from 'recompose/xstreamObservableConfig';

import counterReducer from '../reducer';

setObservableConfig(xstreamConfig);

const enhance = compose(
  pure,
  onlyUpdateForPropTypes,
  setPropTypes({
    counter: React.PropTypes.number,
    increment: React.PropTypes.func,
    decrement: React.PropTypes.func,
  }),
  withPropsOnChange(['counter'], ({ counter }) => ({ counter })),
  withReducer('counter', 'dispatch', counterReducer, 0),
);

const Counter = enhance(({ counter, dispatch }) => (
  <div>
    <h1>Counter module</h1>
    <p>{counter}</p>
    <button onClick={() => dispatch({ type: 'INCREMENT_ASYNC' })}> + </button>
    <button onClick={() => dispatch({ type: 'DECREMENT_ASYNC' })}> - </button>
  </div>
));

export default Counter;

/*eslint无控制台：[“错误”，{允许：[“警告”，“错误”]}]*/
从“React”导入React；
进口{
组成
仅更新PropType，
纯净的
SETECONFIG，
SetPropType，
带减速器，
随着建议的改变，
}从"重组"开始,；
从“重新组合/xstreamObservableConfig”导入xstreamConfig；
从“../reducer”导入反减速器；
setObservableConfig（xstreamConfig）；
常数增强=合成(
纯净的
仅更新PropType，
setPropTypes({
计数器：React.PropTypes.number，
增量：React.PropTypes.func，
减量：React.PropTypes.func，
}),
withPropsOnChange（['counter']，（{counter}）=>（{counter}）），
带减速机（'计数器'，'调度'，减速机，0），
);
常量计数器=增强（{Counter，dispatch}）=>(
计数器模块
{计数器}

分派（{type:'INCREMENT\u ASYNC'}）}>+
分派（{type:'DECREMENT\u ASYNC'}）}>-
));
导出默认计数器；

重新组合/withReducer

未连接到您的Redux应用商店。相反，它会在HOC中创建一个本地存储，其工作方式类似于redux。因此，如果您想从Redux商店消费，您应该使用。

它确实与商店连接。没有Redux循环，效果很好。哦，我明白你的意思。我的错。我会试试看。@KadoBOT一切都进行得很顺利吗？是的，它确实与“连接”一起工作，但我仍然不相信使用“重新组合”中的一个可观察的实用程序不会有任何好转。在

connect（）

之后，您可以使用“重新组合”的可观察的实用程序，例如：

compose（connect（），mapPropsStream（））