用 'recompose' 和 'redux-cycles' 反应 HOC。如何让它发挥作用?
React HOC with 'recompose' and 'redux-cycles'. How to make it work?
所以,我一直在研究 recompose and then, I've discovered this redux-cycles,我认为它非常适合我的目标:函数式 JS 和反应性。
问题是当我使用 HoC(Recompose) 创建组件时无法使事件侦听器工作。 Ps:当我创建常规 React 组件时事件侦听器工作
在重组 API 中,有一些 Observable Utilities,我认为这是我的代码失败的地方。我想我需要它来使 redux-cycles 与 recompose 一起工作,但我无法让它工作。
使用常规 React 组件和 'redux-cycles' 的工作示例:JS Bin
因为它适用于常规的 React 组件和常规的 redux 存储(没有 'redux-cycles'),我将 post 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;
recompose/withReducer
没有连接到你的 Redux 商店。相反,它会在您的 HOC 中创建一个本地商店,其工作方式类似于 redux。所以如果你想从 Redux store 消费,你应该使用 react-redux/connect
.
所以,我一直在研究 recompose and then, I've discovered this redux-cycles,我认为它非常适合我的目标:函数式 JS 和反应性。
问题是当我使用 HoC(Recompose) 创建组件时无法使事件侦听器工作。 Ps:当我创建常规 React 组件时事件侦听器工作
在重组 API 中,有一些 Observable Utilities,我认为这是我的代码失败的地方。我想我需要它来使 redux-cycles 与 recompose 一起工作,但我无法让它工作。
使用常规 React 组件和 'redux-cycles' 的工作示例:JS Bin
因为它适用于常规的 React 组件和常规的 redux 存储(没有 'redux-cycles'),我将 post 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;
recompose/withReducer
没有连接到你的 Redux 商店。相反,它会在您的 HOC 中创建一个本地商店,其工作方式类似于 redux。所以如果你想从 Redux store 消费,你应该使用 react-redux/connect
.