Repository navigation
[Idea] ES6 classes + pure React functions #173
Description
import React from 'react';
import ReactDOM from 'react-dom';
import { reactiveView } from '@risingstack/react-easy-state';
@reactiveView
class MyForm {
inputText = 'change me';
view() {
// This view is reactive: when the user changes
// the `<input>` value, this view is re-rendered.
return <>
<div>I'm automatically refreshed: {this.inputText}</div>
<input
type='text'
defaultValue={this.inputText}
onChange={ev => {
this.inputText = ev.target.value;
}}
/>
</>;
}
}
const my_form = new MyForm();
render(<my_form.view/>);Why not using ES6 classes for state management while using a view property to define how instances are rendered. The view property is a pure and stateless React function which is made reactive by @reactiveView.
EDIT: This is not about using React class components, it's about using ES6 classes to do state management together with pure/stateless React functions.
Thoughts? :-)
cc @lostpebble (I actually wanted to use PullState but for my use case I don't need anything sophisticated and something à la MobX should suffice.)
Activity
solkimicreb commentedon Apr 17, 2020
This could be doable with the current API, the only missing feature is the ability to pass classes to
store. People request that feature from time to time and we always ditched it so far, I guess it's time to revisit it with the team 🙂If we add this feature you can do what you described with a slightly different syntax:
In the meantime I think you can do a userland implementation with a bit of work:
I didn't test it, but I think it should work.
brillout commentedon Apr 17, 2020
I don't want to use React class components. I want to use ES6 classes for state management and use pure and stateless React functions to define how instances should be rendered.
That's lovely, I'm currently using my own hacked-together thing but I'll try this.
Yes I've seen that, such as #89. But what they propose is using React class components. What I propose is using ES6 classes to do state management.
Thanks for having built React Easy State btw., I like its simplicity.
[-]Reactive Classes[/-][+]ES6 classes + pure and stateless React functions[/+]brillout commentedon Apr 19, 2020
I got a prototype working:
I'm excited :-) I'm going to try this in production on the web app I'm currently working on.
[-]ES6 classes + pure and stateless React functions[/-][+][Idea] ES6 classes + pure React functions[/+]solkimicreb commentedon May 20, 2020
@brillout any news on this? How do you manage component lifecycle? Do you use hooks inside the
viewmethod?brillout commentedon May 21, 2020
Hi @solkimicreb !
No news in particular; the prototype I've been working on works so far.
It's not polished (yet) but I'll get back to you if/once I've polished all rough edges.
So far I'm happy to be able to use plain simple ES6 classes to do state management.
brillout commentedon May 21, 2020
As for your questions; the current implementation I'm using is here and it's used like this:
MultiCreatorand make itsviewreactive with@reactiveView: https://github.com/brillout/timer-tab/blob/1c11fc9d03e9d87a89ad789c60e07eaeaaa3228f/views/SeriesPage/TimeCounterList.tsx#L178-L208MultiCreator: https://github.com/brillout/timer-tab/blob/1c11fc9d03e9d87a89ad789c60e07eaeaaa3228f/views/SeriesPage/TimeCounterList.tsx#L103As you can see the
viewis reactive to the class propertyselected_timer_type. In other words we use a ES6 class (!= React class) to do state management.The implementation of
MultiCreatoris not finished and not used in production, so don't be surprised if things don't make sense.I'll be further developing the app in the next coming days/weeks and I'll keep you updated.