deox icon indicating copy to clipboard operation
deox copied to clipboard

Expose createHandlerMap

Open skulptur opened this issue 5 years ago • 4 comments

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) })),
  ]
}

skulptur avatar May 29 '19 20:05 skulptur

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 avatar May 29 '19 21:05 the-dr-lazy

Also, there is a minor relation with #2

the-dr-lazy avatar May 29 '19 21:05 the-dr-lazy

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.

skulptur avatar May 29 '19 23:05 skulptur

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

the-dr-lazy avatar Aug 09 '19 07:08 the-dr-lazy