the-dr-lazy / deox

Functional Type-safe Flux Standard Utilities
https://deox.js.org
MIT License
206 stars 12 forks source link

Expose createHandlerMap #66

Open skulptur opened 5 years ago

skulptur commented 5 years ago

I am working on a helper function that creates action handlers outside of a createReducer function, and from what I understand I need createHandlerMap to do that. I added my current wip implementation for reference. Maybe there is a different way to do this that I am overlooking.

interface HandleThunkParams<Error, Result, SKey> {
  start: any
  error: any
  complete: any
  cancel: any
  onError?: (err: Error) => {}
  onComplete?: (res: Result) => {}
  statusKey?: SKey
}

export const handleThunk = <Error, Result, SKey extends string>({
  start,
  error,
  complete,
  cancel,
  onError,
  onComplete,
  statusKey,
}: HandleThunkParams<Error, Result, SKey>) => {
  const getStatus = (status: AsyncStatus) => createKeyValue(statusKey || 'status', status)

  return [
    createHandlerMap(start, (state: any) => ({ ...state, ...getStatus(loadingStatus) })),
    createHandlerMap(error, (state: any, action: any) => ({
      ...state,
      ...(onError || identity)(action.payload),
      ...getStatus(errorStatus),
    })),
    createHandlerMap(complete, (state: any, action: any) => ({
      ...state,
      ...(onComplete || identity)(action.payload),
      ...getStatus(readyStatus),
    })),
    createHandlerMap(cancel, (state: any) => ({ ...state, ...getStatus(readyStatus) })),
  ]
}
the-dr-lazy commented 5 years ago

Hi @skulptur I think there can be a better solution over exporting createHandlerMap in public API and it's a plugin system which has discussed in #45 and will discuss in more details in #63

As an overall example for your above scenario it could be something like below:

const testReducer = createReducer(defaultTestState, handleAction => [
  handleAction.thunk({
    start,
    cancel,
    error,
    complete,
    // ...
  })
])

If you are interested in the plugin system it would be great to have you in #63.

the-dr-lazy commented 5 years ago

Also, there is a minor relation with #2

skulptur commented 5 years ago

Your code sample above is very similar to what my function already does. I copy-pasted createHandlerMap into my project temporarily while this issue is open. The only difference between what I have and what you demonstrated is that a plugin system makes it go through the library.

However, my function above is only part of my solution. I actually have a function that encompasses a createThunk and the handleThunk function, and returns the actions and the handlers. I then spread the handlers in my createReducer and export the actions. I never need to manually connect the actions to the handlers, which I would still have to do with the proposed plugin system.

We can discuss more about this in #63 if you want, but I thought I'd bring up this very common scenario where you want to generate actions + handlers all at once. Right now I'm doing this for my async thunk, but you could do this for a lot of things like setting up a flag in your store with the proper on/off actions and handlers.

I'm coming to Deox from easy-peasy. Check out the helper section of the readme there. Because easy-peasy is completely based on simple objects, you have actions and reducers as the same thing and this particular scenario is really easy to accomplish. Now it had some other annoyances specially with typescript, that's why I switched.

the-dr-lazy commented 5 years ago

If anyone has any opinion on this topic please let us know.