用 'recompose' 和 'redux-cycles' 反应 HOC。如何让它发挥作用？

Question

所以，我一直在玩 recompose，然后，我发现了这个 redux-cycles，我认为它非常适合我的目标：函数式 JS 和反应性。

问题是当我使用 HoC(Recompose) 创建组件时，我无法让事件监听器工作。 Ps：当我创建常规 React 组件时，事件监听器起作用

在重构 API 中，有一些 Observable Utilities，我认为这是我的代码失败的地方。我想我需要它来使 redux-cycles 与 recompose 一起工作，但我无法让它工作。

使用常规 React 组件和“redux-cycles”的工作示例：JS Bin

因为它适用于常规的 React 组件和常规的 redux 存储（没有“redux-cycles”），所以我只发布 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;

Answer 1

recompose/withReducer 没有连接到你的 Redux 存储。相反，它会在您的 HOC 中创建一个本地存储，其工作方式类似于 redux。所以如果你想从 Redux store 消费，你应该使用react-redux/connect。