higher order function execution

Question

I am confused about higher order functions in recompose. I am playing around with an example in codePen and am not sure why altering the function does not work.

I have tried playing in the console but nothing works.

const IncreaseHappiness2 = withStateHandlers(
  () => ({happiness: 0}), {
    onClick: ({happiness}) => () => ({happiness: happiness + 1}), 
  }
);

when I change to

const IncreaseHappiness2 = withStateHandlers(
  () => ({happiness: 0}), {
    onClick: ({happiness})  => ({happiness: happiness + 1}), 
  }
);

nothings happens when I click on the button.

When I change to:

const IncreaseHappiness2 = withStateHandlers(
  () => ({happiness: 0}), {
    onClick: ({happiness}) => () => ({happiness: happiness + 1}), 
  }
);

I get "I am NaN% happy button!

I am using this for practice: https://codepen.io/Kiwka/pen/vWZVvL?editors=0111

@Paulpro yes, the first one works. I altered it to get a better understanding of how it works. When I look at functions similar to that the parameter is in either the first, second or both functions. I just not sure how to determine how to set it up if I were creating something from scratch — olafsadventures, Jun 13 '19 at 04:12

score 2 · Answer 1 · answered Jun 13 '19 at 05:08

I don't think you can change the standard "arguments to be passed" to the withStateHandlers. It expects you to pass an initial state or a function to get the initial state. With that, the second argument is a function to update the state.

Please read the documentation: https://github.com/acdlite/recompose/blob/master/docs/API.md#withstatehandlers

Also, if you really want to understand how higher order function/components work, I think you should try to create your own HOF/HOC. I am sure there are tons of articles available on the internet.

Hope this helps.

higher order function execution

1 Answers1