Idea sperimentale, Redux wrapper - fevr 09.08.2016

Luca Colonnello [4:33 PM]
Ragazzi volevo porvi una soluzione che ho trovato ad un problema voglio creare container redux che permettano di sovrascrivere il dumb che usano (non usando props dall'esterno) con un default dumb nel caso in cui non si voglia sovrascrivere ho pensato a questo

Luca Colonnello [4:34 PM]

import React, { Component } from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
​
// supposed to receive a class and return a new function (curryed) that
// if called add a render function to the received class,
// rendering the received component passing down all the props
import { withRender } from './utils';
​
// container class with event handler and action creator dispatch
class AContainer extends Component {
  onBtnClick() {}
  componentDidMount(){}
}
​
// factory of AContainer, composed by redux connect and withRender
export const AContainerWithRender = compose(
  connect(() => {}, {}),
  withRender(AContainer)
)
​
// default version using A as dumb component
export default AContainerWithRender(A);
​
​
​
// usage in another file with default render
import React from 'react';
import AContainer from './AContainer';
​
React.render(<AContainer />, ...);
​
​
​
// usage in another file with custom render
import React from 'react';
import { AContainerWithRender } from './AContainer';
​
const AContainer = AContainerWithRender((props) => (
  <div>My custom renderer</div>
));
​
React.render(<AContainer />, ...);
​

Luca Colonnello [4:35 PM]
una utility withRender, curryed, che ricevuta una classe, la estende aggiungendo il render ditemi che ne pensate e se è chiaro

Matteo Ronchi [4:39 PM]
ma quale sarebbe il caso d’uso? cioè è chiaro che ti permette di definire un wrapper redux e di riutilizzarlo più volte ma in che scenario lo vedi utile/necessario?

Luca Colonnello [4:49 PM]
creo un toolkit di componenti che usano redux per separare logica delle interazioni rispetto a grafica voglio permettere all’esterno a chi lo usa di ridefinire solo la view quindi il container non voglio debba essere ricreato ogni volta ma creo il mio componente tab e chi lo usa usa la grafica che offro o se la riscrive pensi possa essere una cazzata? chiedo eh… condivido per quello :slightly_smiling_face:

Matteo Ronchi [4:53 PM]
non basta creare una factory che riceve il componente e lo restituisce wrappato dal container? Cioè stilisticamente è figo ma non vedo perchè dovrei usare withRender quando posso semplicemente esportare dei moduli che fanno la stessa cosa.. l’unico vantaggio è il default, ma perchè dovrei usare un default? non so se mi sono spiegato non critico l’approccio semplicemente cerco di capire che reale vantaggio potrei avere rispetto a creare moduli es che esportano una funzione che accetta un componente e lo wrappa con connect con il tuo componente devo introdurre una dipendenza esterna che mi risparmia poche righe

Luca Colonnello [5:00 PM]
si ma manca il default questo serve a standardizzare l’approccio in FP

Matteo Ronchi [5:01 PM]
si ma no vedo un caso reale in cui il default possa servire

Luca Colonnello [5:01 PM]
se tu fai un toolkit o cmq componenti riutilizzabili il container ha già la grafica

Matteo Ronchi [5:01 PM]
si ma chi mai userebbe il default?

Luca Colonnello [5:01 PM]
??? se prendo il tab di material ui è fatto così

Matteo Ronchi [5:01 PM]
cioè se lo uso vuol dire che il default è il mio componente reale si ma loro ti danno un component con UI e il default tab serve

Luca Colonnello [5:02 PM]
esatto

Matteo Ronchi [5:02 PM]
il default con un connect non serve perchè non lo useresti mai

Luca Colonnello [5:02 PM]
se tu esporti un componente che ha una parte redux e una parte react la parte redux è connect + reducer + actions + selectors (edited) la parte react è il dumb + il container del connect (edited)

Matteo Ronchi [5:02 PM]
vero ma continuo a non aver bisogno del default crei una factory che accetta il componente e lo wrappa con tutta la parte redux hai anche test + facili

Luca Colonnello [5:03 PM]
si ma il tuo toolkit non offre quindi un default render?? me lo devo fare ogni volta a mano (edited) chiaramente è un caso specifico

Matteo Ronchi [5:04 PM]
facciamo un caso reale

Luca Colonnello [5:04 PM]
ok

Matteo Ronchi [5:04 PM]
io prendo il tuo toolkit e lo uso nella mia app

Luca Colonnello [5:04 PM]
si

Matteo Ronchi [5:04 PM]
per quale motivo dovrei usare il tuo default renderer? tu non hai la mia UI, non sai cosa ci metto dentro e non usi di sicuro le mie CSS quindi prendo la tua utility e gli passo un mio componente al che mi chiedo perchè uso questa lib, se gli devo fornire tutti i building blocks? non posso farmi io un modulo che accetta il componente e che internamente ha i building block che comunque mi devo scrivere (actions, connector, etc..) (edited)

Luca Colonnello [5:06 PM]
l’obiettivo del toolkit dovrebbe essere offrire già tutti i copmonenti funzionanti, personalizzabili nello stile

Matteo Ronchi [5:06 PM]
aspetta

Luca Colonnello [5:06 PM]
ok

Matteo Ronchi [5:06 PM]
ma parliamo di uno UI toolkit? (edited)

Luca Colonnello [5:06 PM]
beh si

Matteo Ronchi [5:06 PM]
e perchè mai uno dovrebbe usare uno UI toolkit vincolato a redux?

Luca Colonnello [5:06 PM]
è una scelta implementativa

Matteo Ronchi [5:07 PM]
le mie critiche erano legate al fatto che pensavo che tu fornissi solo le utilities :wink:

Luca Colonnello [5:07 PM]
ah no no questa è un esigenza specifica cmq non è solo redux il punto quello era per dimostrare che con la composition si può fare anche con il connect ma se io voglio creare come con recompose dei comp stateless ma che hanno con degli HoC dei comportamenti legati al componente stesso gestione dello stato magari

Matteo Ronchi [5:08 PM]
se mi dici che tu offri una lib, la cui logica è redux-based e che vuoi permettere ai tuoi user di cambiare la dumb part del componente, mantenendo ovviamente le props che tu gli passi, allora lo snippet ha senso

Luca Colonnello [5:08 PM]
così posso sovrascrivere il render ma avere stato e altri HoC si si esatto

Matteo Ronchi [5:09 PM]
anche se non so se userei una lib che mi impone i suoi reducer per funzionare, anche se ha un suo perchè) però ci dovrei riflettere, a pelle non me gusta gli UI comp dovrebbero essere completamente isolati

Luca Colonnello [5:09 PM]
si ma come ti scrivevo

Matteo Ronchi [5:09 PM]
personalmente non vedo male lo stato di un componente react se è specifico ad azioni locali

Luca Colonnello [5:09 PM]
possono anche non essere vincolati a redux si si ma lo fai uguale immagina recompose ho il dumb e con gli HoC creo lo stato e i reducer dello stato

Matteo Ronchi [5:10 PM]
però aspetta se togli il layer redux e lasci cambiare il componente praticamente chiede all’utente di rifare ilt uo lavoro solo x componenti davvero banali funzionerebbe la sostituzione così com'è

Luca Colonnello [5:10 PM]
se il componente è stateful no

Matteo Ronchi [5:10 PM]
si ma a quel punto devi incastrarti con lemeccaniche di aggiornamento dello stato è figo ma complesso

Luca Colonnello [5:11 PM]
se vai in composition è esattamente come il concetto di dumb e container come funge anche recompose

Matteo Ronchi [5:12 PM]
si ma non vedo come per esempio puoi gestire il custom rendere di una select, sarebbe mooolto complicato

Luca Colonnello [5:12 PM]
scusa non ho capito

Matteo Ronchi [5:13 PM]
supponi che uno dei tuoi componenti è una select (edited)

Luca Colonnello [5:13 PM]
si una select è stateless non ha bisogno di tale logica

Matteo Ronchi [5:13 PM]
se io voglio cambiare la UI devo scrivere uno sproposito di codice mmm statelss +o- se ha multiselezione, elementi interattivi etc...

Luca Colonnello [5:14 PM]
nel caso di un ui toolkit dovrebbe essere stateless

Matteo Ronchi [5:14 PM]
guarda react-select

Luca Colonnello [5:14 PM]
certo in quel caso funzionerebbe devi scrivere molto codice

Matteo Ronchi [5:14 PM]
si ma per fare un renderer ci impiego una vita

Luca Colonnello [5:14 PM]
ma la tua esigenza è proprio quella di rifarlo da 0 se vuoi cambiare il render sarebbe peggio rifare tutto da 0, grafica + logica!!

Matteo Ronchi [5:15 PM]
si ma vuol dire che la tua logica deve andarmi perfettamente bene

Luca Colonnello [5:15 PM]
se così non fosse non usi quel componente ma se fai un tab ma il render deve essere modificato così lo puoi fare

Matteo Ronchi [5:16 PM]
sisi è chiaro il vantaggio semplicemente, ma è molto personale come punto di vista, se uso la tua lib e la personalizza in maniera forte molto probabilmente la riscrivo come serve a me l’effort è maggiore ma non dipendo dalle tue scelte di design (del codice) e di utilizzo

Luca Colonnello [5:17 PM]
si ma se non ti capita questo caso, non usi la lib o meglio se l’implementazione è molto differente nella logica e nel render certamente non ha senso è un caso limite magari, ma facendolo in FP è compatibile con molte altre cose come appunto recompose o aprhodite

Matteo Ronchi [5:18 PM]
quello assolutamente tra l’altro tu susi aphrodite?

Luca Colonnello [5:19 PM]
si cmq è un utility che fornisce un approccio per risolvere questo problema che si ha spesso se sviluppi ui toolkit in react

Matteo Ronchi [5:19 PM]
l’approccio è interessante ma non mi piace molto la sintassi da usare e neanche il fatto che vada a intercettare tutte le mie render function

Luca Colonnello [5:19 PM]
spesso non hanno logica complessa ma il fatto di non poter toccare la grafica è brutto

Matteo Ronchi [5:19 PM]
concordo

Luca Colonnello [5:19 PM]

il fatto che vada a intercettare tutte le mie render function

cosa intendi? volevo usare aphrodite per la stessa ragione, fare qualcosa del genere con withStyle tipo

Matteo Ronchi [5:22 PM]
no spe forse mi confondo ne sto guardando troppe assieme

Luca Colonnello [5:22 PM]
ahahahah è quella di Khan Dods (edited)

Matteo Ronchi [5:22 PM]
è radium che wrappa la rende function sorry

Luca Colonnello [5:22 PM]
si si esatto infatti non me gusta molto

Matteo Ronchi [5:23 PM]
non so tra iniettare css e usare stili inline quale mi piace di più :stuck_out_tongue:

Luca Colonnello [5:23 PM]
preferisco iniettare css onestamente lo stile inline ha troppe limitazioni

Matteo Ronchi [5:24 PM]
beh in realtà sono tutte aggirabili (vedi radium)

Luca Colonnello [5:24 PM]
eh ma un hover fatto in css non è un hover fatto in js perdi after e before e animation hai solo transition se non mi sbaglio eh

Matteo Ronchi [5:26 PM]
beh si molto dipende da cosa devi fare personalmente non sono molto preoccupato lato animation e simili

Luca Colonnello [5:26 PM]
beh si certo dipende

Matteo Ronchi [5:26 PM]
anche le mediaquery le gestiamo cmq via JS perchè carico proprio layout applicativi diversi

Luca Colonnello [5:26 PM]
beh si

Luca Colonnello [5:46 PM]
piccola osservazione: se usi recompose questo withRender non serve, in quanto basta comporre tutto con recompose e passare tutto a connect recompose offre l’enhancer che fa una roba simile connect sarebbe una funzione composta come le altre e il default component sarebbe un componente che è già stato decorato con l'enhancer e non crei lib ulteriori e rimani standard se hai classe invece ti serve una roba come questa (edited) scelte implementativa

results matching ""

    No results matching ""