mAAdhaTTah / brookjs

reactive programming tools for well-structured, testable applications
https://mAAdhaTTah.github.io/brookjs/
MIT License
15 stars 1 forks source link

New hooks #1138

Open mAAdhaTTah opened 4 years ago

mAAdhaTTah commented 4 years ago

I think there's a lot of improvement that could be made to the hooks that could eventually move us away from Redux completely, but I'm not in love with all of the APIs yet. There's also an incoming hook called useMutableSource that we could take advantage of, either in brookjs directly or in the kefir org. This might suggest different APIs in brookjs.

Also, taking a note from useSagaReducer, we might want to move useDelta to useDeltaReducer and change the API to look like this:

const [state, dispatch] = useDeltaReducer(rootDelta, reducer, initialState, init);

This makes it looks more like useReducer and the initialState & init APIs are much better for bootstrapping the reducer than what we have. We could then create root$ with a useRootDispatch:

const root$ = useRootDispatch(dispatch);

return <RootJunction root$={root$}>{children}</RootJunction>

We could consider changing the name of this prop as well, and this could be used to plug the RootJunction into the standard useReducer.

Lastly, instead of toJunction, we could enable it's functionality with useJunction:

const events = {
  onClick: () => ...
};
const { onClick } = useJunction(events);

to enable callbacks to plug into the CentralObservable. We'd still need a replace for the combiner part of the API though, which might require another HOC-style API.

These are just some ideas. Opening this to track & discuss other ideas.

mAAdhaTTah commented 4 years ago

useEddyReducer would be similar to useReducer except it would:

  1. Enable returning loops & dispatching back into itself.
  2. Plug all of the events into the Central Observable (if it exists).

It would be nice to be able to compose this with useDeltaReducer under the hood.

mAAdhaTTah commented 4 years ago

useState$, which is like useReducer but returns an Observable of state instead.

const [state$, dispatch] = useState$(reducer, initialState, init);

You could then use useMutableSource to unwrap the value for rendering. This might be usable under the hood, maybe with useEddyReducer, to compose up into useDeltaReducer. Would be nice if overall you could mix and match to build your preferred API.

I'm not sure how ergonomic passing Observables around will be (especially in TypeScript), but this is just an idea.