recyclejs / recycle Goto Github PK

Redux plugin implementation.

I believe that it could be similar to store plugin but with global reducers and createStore from Redux

I was facing a weird behavior with sibling instances of a same component, and now I think I was able to isolate the issue in this simple exemple:

const Exemple = recycle({
  initialState: ({
    myBoolean: false,
  }),

  update(sources) {
    return [
      sources.lifecycle
        .filter(e => e === 'componentDidMount')
        .reducer(state => {
          state.myBoolean = !state.myBoolean
          return state
        }),
    ]
  },

  view(props, state) {
    return (
      <p>{state.myBoolean.toString()}</p>
    )
  }
})

I would expect all instances of this component to negate myBoolean on mount, making it true, as the initial state defines it false. But instead, each instance gets a different value, as they were negating the same state reference.

If I do:

<Exemple/>
<Exemple/>
<Exemple/>

I get:

<p>false</p>
<p>true</p>
<p>false</p>

Then, if I navigate and come back to the page, it inverts:

<p>true</p>
<p>false</p>
<p>true</p>

Combining the React adapter and Observable adapter is limiting. Is there a reason it is necessary? What about something like the following?

Recycle({
  adapters: {
    main: reactAdapter,
    observable: mostAdapter
  }
})

This way, they can be changed independently without the need to create a new adapter for each combination.

I am thinking about using this amazing lib into my next project and i would like to hear about your thoughts about supporting typescript. It shouldn't be that hard to do so, and i would be willing to put some effort myself and create a pull a request, if you are ok with it ;)

I'm really new to this library and Rxjs in general but I haven't found any answer searching through the source.

I'm getting:
Header.js:25 Uncaught TypeError: e.select(...).addListener(...).withLatestFrom is not a function

in browser console. I have no idea why, my example is about as vanilla as it gets.

Where does withLatestFrom come from? Rxjs?

Stepping through in debugger it seems that for whatever reason what is returned from addListener does not include a withLatestFrom function. The call to ref.stream.switch() returns an AnonymousSubject for whatever that's worth to you.

Currently, for creating umd bundled script this script is used:

browserify lib/index.js -o dist/recycle.js -s recycle && echo \"recycle = recycle.default;\" >> dist/recycle.js

Making recycleobject to be recycle.default is clearly a hack 😳
Any suggestions how to do this properly?

Using webpack seemed an overkill for this, but maybe I'm wrong?

Pull requests are welcome! :)

Hello @domagojk , I am the member of cdnjs project. We want to host this library. There is a question want to ask. I found that there is no recycle.js in v0.2.1~v0.3.1 and v0.5.0 on npm. Please help me confirm that which file I need to add in these versions. Thanks for your help!

cdnjs/cdnjs#10053

For people want to play with recycle in an environment like codepen or jsfiddle.
Already opened an issue: cdnjs/cdnjs#10053.

I've long wondered why Redux can't also have a quick simple string-based API to enter the state path you're interested in.

Neat library.

I'm wondering if there's an obvious/preferred pattern for using it alongside SSR for universal components?

I have a comprehensive webpack build that defines CLIENT and SERVER constants to indicate which platform React is being rendered on. This makes it trivial to handle RxJS streams with a simple if/else statement to tack on .take(1) to prevent over-subscribing on the server and attempting to setState() on a component after ReactDOM.renderToString() has already been called.

So, far so good.

The problem I have is signalling to my web server that the data stream is 'ready' before rendering the HTML. If I have an async stream, I want the server to 'wait' until it has a value before starting the React chain and throwing back to the initial markup. On the client, it can setState as many times as it wants.

Is there anything built into the Recycle API that would allow me to merge ALL component reducers into a single stream that's emitted when every individual reducer has received its first value, that I can subscribe to outside of the component chain?

That way, I could simply await on a merged stream Promise for that to occur before calling renderToString and be assured that the React chain being built is going to subscribe to a value that's 'hot' and is available before attempting to generate markup.

I started spinning up my own library to handle this, but creating a new 'context' for each new request and then figuring out the best way to decorate components and get access to the original streams within the same context is a rabbit hole I'd rather not get lost down if this lib can already do all/most of it.

Thanks in advance for any suggestions!

Just wanted to let you know in the example for web sockets links to the autocomplete example instead of https://recycle.js.org/examples/Websocket/

I know you put some work into and probably want to show it off!

As @faceyspacey suggested, documentation should look something like this:

Quick Start
Motivation
Concepts
--Stateful Component
--Parent-Child Relationship
--Using React Components
--Store
--Plugins
--Adapters
Examples
--Autocomplete
--WebSocket Echo
--TodoMVC
API Reference

I'm currently working on helper library for making tests easier.

I think being your own separate framework will lead to way less adoption than being just standard React components. What are the challenges in achieving this?

If I have multiple classes on the node on which I want to attach the listener and I want to select it by one of its classes, it won't work. Is this expected?

const Timer = recycle({
  initialState: {
    secondsElapsed: 0,
    counter: 0
  },

  update(sources) {
    debugger;
    return [
      sources
        .selectClass("not-working")
        .addListener("onClick")
        .reducer(function(state) {
          debugger;
          state.counter++;
          return state;
        }),

      Rx.Observable.interval(1000).reducer(function(state) {
        state.secondsElapsed++;
        return state;
      })
    ];
  },

  view(props, state) {
    return (
      <div>
        <div>
          Seconds Elapsed: {state.secondsElapsed}
        </div>
        <div>
          Times Clicked: {state.counter}
        </div>
        <button className="not-working f5 avenir link dim ph4 pv3 mb2 mt4 dib white">
          Click Me
        </button>
      </div>
    );
  }
});

When I try to add a listener to a React Native element, nothing happens.

In my update:

sources.select('Button').addListener('onPress')
  .reducer(...)

In my view:

<Button title="Go" />

It seems like recycle cannot select the Button element. Tried to figure it out, but can't find the reason.

So, how to use this library with different streams. I come from cycle.js and this is really killer-feature for me as well as better effects handling (drivers)

I'm trying your lib with next.js and been great so far, but with version v2.2.1 I'm getting a warning on the next.js server:

The example component I'm rendering is this one:

import React from 'react'
import recycle from 'recycle'
import { Observable } from 'rxjs'

const Timer = recycle({
  initialState: {
    secondsElapsed: 0,
    counter: 0,
  },

  update(sources) {
    return [
      sources.select(Button).addListener('onClick').reducer(state =>
        Object.assign({}, state, {
          counter: state.counter + 1,
        }),
      ),

      Observable.interval(1000).reducer(state =>
        Object.assign({}, state, {
          secondsElapsed: state.secondsElapsed + 1,
        }),
      ),
    ]
  },

  view(props: propsType, state) {
    return (
      <div>
        <div>Seconds Elapsed: {state.secondsElapsed}</div>
        <div>Times Clicked: {state.counter}</div>
        <button className="button">Click Me</button>
      </div>
    )
  },
})

export default Timer

When I comment out the Observable with the interval the warnings go away.

I've fixed the 2.2.0 version in the package.json that don't have this problem.

Gratz on the library really dig the overal concept.

I however have a simple question that I would like to get answered.
In libraries like redux etc. there is a need for a immutable approach for properly re-rendering all the components (think about shouldComponentUpdate etc.).

In the examples given in the docs (for example here) this concept doesn't seem to be the standard?

Shouldn't especially in a functional approach "pure reducers" be preferred above the current usage?

it's just unnecessary confusion at that point in time, especially if the user isn't expected to use it.

I really like how this project brings together rxjs and react, I just don't see any momentum around it anymore so wanted to check is it dead and/or you looking for new maintainer ?

Using 'this.state = ...' has been deprecated by React. Shouldn't we change line 50 in 'component.js' to this.setState(newState)?

Line 50 in 'component.js'

this.state = this.componentState

Could become

this.setState(this.componenState)

As @m59peacemaker suggested, It would be great to have benchmark tests.
For component rendering compared to react and store plugin compared to Redux