Changing the layout of a component depending on Redux state

Question

I\'m developing a course scheduling application in react, and I\'m using it as a chance to learn redux. There\'s a browse menu (implemented as the Browse component) that I\'

Answer 1

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