1

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

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

在 recompose 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;
4

1 回答 1

2

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

于 2017-03-13T01:55:04.840 回答