Question

所以，我一直在玩recompose然后，我发现了这个redux-cycles，我认为这对我所做的事情很有帮助。瞄准：功能性JS和反应性。

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

时有效

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

使用常规React组件的工作示例和＆＃39; redux-cycles＆＃39;：JS Bin

由于它适用于常规的React组件和常规的redux商店（没有＆＃39; redux-cycles＆＃39;），我只是发布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商店消费，则应使用react-redux/connect。

反应HOC并重新组合＆＃39;和＆＃39; redux-cycles＆＃39;如何让它发挥作用？

1 个答案: