Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Return methods (action creators) instead of dispatch #6

Open
BigAB opened this issue Oct 24, 2019 · 2 comments
Open

Return methods (action creators) instead of dispatch #6

BigAB opened this issue Oct 24, 2019 · 2 comments
Labels
enhancement New feature or request question Further information is requested

Comments

@BigAB
Copy link
Owner

BigAB commented Oct 24, 2019

Is your feature request related to a problem? Please describe.

Having to define a lot of callbacks from the dispatch method can be tedious:

const [
  { restaurant },
  dispatch,
] = useEpic(restaurantFilterEpic);

const handleRegionChange = useCallback(e => dispatch(['SELECT_REGION', e.target.value])), dispatch);
const handleCityChange =  useCallback(e => dispatch(['SELECT_CITY', e.target.value]));
const handleRestaurantChange =  useCallback(e => dispatch(['SELECT_RESTAURANT', target.value]));

return <RestaurantSelector
  restaurant={restaurant}
  onRegionChange={handleRegionChange}
  onCityChange={handleCityChange}
  onRestaurantChange={handleRestaurantChange}
/>

Describe the solution you'd like
I'd like an option, to receive action creator style methods instead of the dispatch, perhaps something like:

const [
  { restaurant },
  { handleRegionChange, handleCityChange, handleRestaurantChange },
] = useEpic(restaurantFilterEpic, {
    actions: {
      handleRegionChange: ['SELECT_REGION', e => e.target.value],
      handleCityChange: ['SELECT_CITY', e => e.target.value],
      handleRestaurantChange: ['SELECT_RESTAURANT', e => e.target.value],
    }
  });

return <RestaurantSelector
  restaurant={restaurant}
  onRegionChange={handleRegionChange}
  onCityChange={handleCityChange}
  onRestaurantChange={handleRestaurantChange}
/>

The actions option should memoize the callbacks, but in a more efficient way than useCallback

Describe alternatives you've considered

After writing the examples I have to question: Is it worth it, the amount of code written is pretty close, maybe this isn't the best idea?

@BigAB BigAB added enhancement New feature or request question Further information is requested labels Oct 24, 2019
@BigAB
Copy link
Owner Author

BigAB commented Oct 24, 2019

Maybe a better approach would be to allow the Epic function define the action creators?

const restaurantFilterEpic(actions$, state$) {/*...*/}
restaurantFilterEpic.actions = {
      handleRegionChange: ['SELECT_REGION', (e) => e.target.value],
      handleCityChange: ['SELECT_CITY', (e) => e.target.value],
      handleRestaurantChange: ['SELECT_REGION', ([e) => e.target.value],
}

@BigAB
Copy link
Owner Author

BigAB commented Oct 24, 2019

In retrospect, in my last comment, the e => e.target.value does not belong there

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request question Further information is requested
Projects
None yet
Development

No branches or pull requests

1 participant