React HOC with 'recompose' and 'redux-cycles'. How to make it work?

Question

So, I've been playing around with recompose and then, I've discovered this redux-cycles, which I think it's great for what I'm aiming: functional JS and reactiveness.

The problem is that I can't make the event listener work when I create the component using HoC(Recompose). Ps: event listener works when I create regular React Components

In the recompose API, there is some Observable Utilities, and I think this is where my code is failing. Guess I need that to make redux-cycles work together with recompose, but I couldn't make it work.

Working example with regular React Component and 'redux-cycles': JS Bin

Since it works with regular React Components and regular redux store (no 'redux-cycles'), I'll just post the HoC code:

/* 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;

score 2 · Accepted Answer · answered Mar 13 '17 at 01:55

2

recompose/withReducer doesn't connect to your Redux store. Instead, it creates a local store in your HOC which works like redux. So if you want to consume from a Redux store, you should use react-redux/connect.

answered Mar 13 '17 at 01:55

wuct

10,057
2
19
22

It does connect with the store. Without Redux-cycles it works fine. – KadoBOT Mar 13 '17 at 02:05
1

Oh, I get what you are saying. My bad. Will try that. – KadoBOT Mar 13 '17 at 02:06
@KadoBOT does everything go well? – wuct Mar 17 '17 at 06:55
Yeah it did work with 'connect', but I'm still not convinced that there isn't a turnaround using one of the observable utilities from 'recompose'. – KadoBOT Mar 17 '17 at 10:36
You can use recompose's Observable utilities after `connect()`, ex: `compose(connect(), mapPropsStream())` – wuct Mar 19 '17 at 03:25
That seems better. Will try that. – KadoBOT Mar 20 '17 at 13:37

React HOC with 'recompose' and 'redux-cycles'. How to make it work?

1 Answers1