Changing the layout of a component depending on Redux state

by

connect state on your Child components

Using connect on child components has the following advantages:

  • Your parent component need not bother about connecting all the props required by its children even though the parent itself is not using the prop.

  • Child components become more reusable, and easily maintainable.

  • Avoids passing down props blindly from parent to children. If the Child requires a considerable number of props, people don’t want to explicitly pass only the required props, instead they tend to do this inside the parent: <Child {...this.props} />.

    Use connect and you know what your Component is getting.

  • You don’t have to repeat propTypes definitions in parent and children.

Separate business logic from views:

Business logic is:

  • Any calculation based on data that came from the API or user input
  • Data normalization and formatting
  • Done in small increments or functions so that they are easily extendable, composable, and maintainable
  • Reuse the business logic functions in multiple views.

Views should:

  • Pull prepared data from state and/or business logic functions

  • Show or hide UI based on data

  • Simplify UI components so that they are small, reusable, and easily maintainable

  • Get props through connect from a business logic function.

What is a business logic function?

Business logic functions are small reusable functions that input data and output modified data. If they are small, they can be easily reused and modified. Business logic functions should be pure. Because business logic functions are often reused, they work best when memoized. In some languages these are called getters or selectors.

To streamline memoization, you may use reselect library. It’s a very simple as it only does two things: memoization and reusability. Take a look at the official API for more information on how it does that.

Advantages:

  • Business logic is in small functions that are easy to debug, enhance, maintain, read
  • Business logic functions are memoized so repeated calls are performant
  • Business logic is separated so it’s reusable across the app
  • The application is faster because main operations are highly optimized

More Related Contents:

  1. React Context vs React Redux, when should I use each one? [closed]
  2. Understanding React-Redux and mapStateToProps()
  3. How do I access store state in React Redux?
  4. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  5. Global state in React Native
  6. Redux Presentational Components Vs Container Component
  7. How can I dispatch function in redux?
  8. Component won’t update when a redux state change occurs
  9. Could not find “store” in either the context or props of “Connect(App)”
  10. Why do we need middleware for async flow in Redux?
  11. When to use ES6 class based React components vs. functional ES6 React components?
  12. React useEffect in depth / use of useEffect?
  13. Why is my onClick being called on render? – React.js
  14. How do I test axios in Jest?
  15. Await is a reserved word error inside async function
  16. Is this the correct way to delete an item using redux?
  17. React: how to load and render external html file?
  18. Is store.dispatch in Redux synchronous or asynchronous
  19. Updating nested data in redux store
  20. Cleaner/shorter way to update nested state in Redux?
  21. redux fetch body is not use with no cors mode
  22. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  23. How to sync Redux state and url hash tag params
  24. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  25. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  26. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  27. having multiple instance of same reusable redux react components on the same page/route
  28. Update single value in item array | react redux
  29. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  30. React-Redux: Should all component states be kept in Redux Store

Leave a Comment