Newbie..

[gnimmelf]

Thanks for a good article and this repo. If you find the time:

I'm trying to make a small proof of concept as to why we should consider RxJs with React at our company, and I know enough about the patterns to see why, but I'm still a newbie on both. I took your counter-example and made it work with https://github.com/coderhaoxin/react-flatpickr:

export const Calendar = ({ date, selectDate, reset }) => (
  <div>
    <h1>{date}</h1>
    <Flatpickr
      options={{
        clickOpens: false,
        dateFormat: 'Y-m-d',
        defaultDate: date,
        inline: true,
      }}
      onChange={selectDate}
    />
    <button onClick={reset} id="reset">Reset</button>
  </div>
);

Calendar.propTypes = {
  date: PropTypes.string.isRequired,
  selectDate: PropTypes.func.isRequired,
  reset: PropTypes.func.isRequired,
};

export default connect(({ date }) => ({ date }), calendarActions)(Calendar);

Now I am stuck trying to figure out how to make a click on the reset-button call setDate(date) on the Flatpickr-component, as so far I can't seem to get at it from anywhere, at by least brute-forcing my way along with console.log in the above component and your RxState.

So, if you find the time and already know the scenario, please nudge me along in the right direction.

Cheers, Flemming

[MichalZalecki]

Now I am stuck trying to figure out how to make a click on the reset-button call setDate(date)

flatpickr should accept a value as prop and doesn't require syncing manually. Then you could just do:

const reducer$ = Rx.Observable.of(() => initialState)
  .merge(
    calendarActions.selectDate.map(date => state => ({ ...state, date })),
    calendarActions.reset.map(()=> state => ({ ...state, date: null })),
  );

If I were you and I'd be stuck with Flatpickr, I'd change component so it implements componentWillReceiveProps and sync Flatpickr with date value there. Hope it makes sense.

[gnimmelf]

Thank you! I managed using the value as prop alt. It's not nice, but it will do.

As a side-note, since I haven't tried it, will function wrapWithConnect(WrappedComponent) in your RxState.js accept a full component, or just JSX?

[MichalZalecki]

WrappedComponent should be a class or a function. Example implementation's using JSX but you can go with React.createElement(WrappedComponent) as well.

[gnimmelf]

I understand a lot more now. Thank you very much for this.