Understanding higher-order components

  • Why use HOC: Promote reuse of logic across React components.
  • How to use HOC: The core structure of a HOC is a function that takes a component and returns a new component.
  • HOC are pure functions with no side-effects because the component passed in, is wrapped in a new component.
  • The HOC looks like this: – – State now has a property to inject data from the API fetch into the wrapped component via the prop.
  • React Redux connect has a different function signature of a function returning a function which accepts one argument (ie, ‘component’) to create a HOC.

Understand why and how to use higher-order components with React JS

Continue reading “Understanding higher-order components”

A new approach to managing Redux actions – Medium

A new approach to managing Redux actions:  #ReactJS

  • It needs 3 types of actions: COUNTER_PLUS_ONE, COUNTER_MINUS_ONE, COUNTER_RESET. Then we create 3 actions files (we usually create a redux folder for actions): counterPlusOne.js, counterMinusOne.js, counterReset.js.
  • From the code we can see: the wrapper reducer itself is also a place to write reducers.
  • The wrapper reducer is responsible for loading other reducers defined in different actions, and call them one by one to generate a new state when receiving a new action.
  • Easier to develop: no need to jump between files when creating actions.
  • Whenever creating an action, it usually and immediately needs to create a reducer to handle it to update the store.

I’ve been using Redux for about one year and enjoyed it for creating a pretty large project. Redux really helped a lot for managing the…
Continue reading “A new approach to managing Redux actions – Medium”