Documentation for React Application about crocks HOT 3 CLOSED

@stliang Where we work we use crocks and other functional/ADT libs in both the front end and backend.
It really just depends on how you define the "edge" of your program. The edge being where all types are unwrapped and resolved to an answer.

For Sum types, like Either, we have a function that will let you fold out your result. It is called either and takes 2 functions. The first is called if the instance is in Left, the second if Right. either.

So you "could" use types like this for a simple if...then. That function you provided has a siggy of Props -> Component. So the real power is if you have function that work on the prop that can then be transformed before calling render. So you can change the props around conditionally before it hits the render. Like a mixin or a limited HOC that just transforms props. so you can have something like.

// isAdmin :: Props -> Either _ Props
// modifyAdmin :: Props -> Props
// modifyUser :: Props -> Props
// normalizeProps:: Props -> Props
// render Admin :: Props -> Component
// renderUser :: Props -> Component

// renderThat :: Props -> Component
const renderThat = compose(
  either(renderUser, renderAdmin),
  bimap(modifyUser, modifyAdmin),
  chain(isAdmin),
  compose(Either.of, normalizeProps) // lift into a Right
)

This is all consolidated into one composition for examples sake, but this really should be (2) or three compositions composed into one.

from crocks.

This is a nice suggestion

If you'd like some advice for now i think you could look into doing it via pure function components, this is how i do it now. These are functions and work with the ADT's as normal functions do. You can then have whichever function creates the Either or Maybe and compose it with your functions to create components.

return compose(
  option(<OtherComponent />)
  map(createNormalComponent),
  createMaybeFromProps
)

Another option is using the IfElse helper to create the composed component by specifying the predicate and the two component functions

IfElse(IsLoaded, LoadingComponent, UserItem)

This feeds in to a more general set of requests to have a collection of tutorials and "Real World" scenarios

from crocks.

Thanks for the advice, I believe this should work. Will test it out.

from crocks.