react-webpack-rails-tutorial icon indicating copy to clipboard operation
react-webpack-rails-tutorial copied to clipboard

demo react-over-hotwired and proof #1508 fixed

Open theforestvn88 opened this issue 3 months ago • 1 comments

This is a demo for my pull request react_over_hotwired and also proof that the react_on_rails issue 1508 is fixed.

  • to run this pr:

    • clone theforestvn88:react_over_hotwired repo, build on local
    • yalc push
    • cd react-webpack-rails-tutorial && yalc add react-on-rails
  • demo on new tab Hotwired tab, with a link at the bottom to show the proof of 1508.

  • about the issue 1508: i setup the same as the reproduction, the car model replaced by the comment model. The react-component inside the form will show with the flag force_load = true that proof my solution could solve this issue. (you can turn-off the flag force_load to see that the nested react-component will not show).

  • the main purpose of this pull request is to demo how to work with react-components over rails 7 hotwired, but what i have done so far is only sending new react-components to client side over hotwired. How about the existed react-components ?

    For example, in this demo i setup 2 components: comment-list and comment-form, comment-form will send over hotwired and it looks good, but when a comment is created, the created comment will be sent to client over hotwired and prepend directly to comments list on comment-list component, this is a normal hotwired flow --> but with react, it very smell, in my opinion. We should not inject a view data into dom-elements hierarchy under the react-component control, right ?

    of course with json response or set up ActionCable (which has it's cost), we could do that by dispatching new data (as you guys already did on Stimulus page demo), but what i try to do here is with turbo-stream response.

    the only solution come to my mind (so far) is sending a script that dispatching append/prepend/delete/modify... data through the redux store.

so what do you think ?


This change is Reviewable

theforestvn88 avatar May 21 '24 09:05 theforestvn88