App Store installation: Redux DevTools

Matters needing attention

Store: Must be unique

Only store can change its content, but Reducer cannot

Reducer must be a pure function

What is the story

Easy to test, can run in different environments and exhibit consistent behavior.

Three principles

Single fact source, read-only state, change using pure functions

Redux middleware

The middleware provides the mode of third-party plug-ins to customize the process of intercepting action -> Reducer. Change to Action -> middlewares -> Reducer. This mechanism allows us to change the data flow to implement functions such as asynchronous action, action filtering, logging, exception reporting, and so on.

Common middleware:

Redux-logger: provides log output

Redux-thunk: handles asynchronous operations

Redux-promise: Handles asynchronous operations, and the return value of actionCreator is promise

disadvantages

The data required by a component must be passed from the parent component rather than fetched from the store as in Flux.

When a component’s associated data is updated, even if the parent doesn’t need the component, the parent will still render, which may affect efficiency, or need to write a complex shouldComponentUpdate.

How do you define operations in Redux

Actions in React must have the Type attribute, which indicates the type of operation being performed.

They must be defined as a string constant, and you can add more attributes to it.

In Redux, actions are created using a function called Action Creator.

Resolve the role of the Reducer

Reducer is a pure function that specifies how the state of the application changes as the operation changes.

Reduce works by taking previous states and actions and then returning a new state.

It determines what type of update needs to be performed based on the type of operation and returns the new value.

If no work needs to be done, it returns to its previous state.

The meaning of Store in Redux

A store is a JavaScript object that holds the state of an application and provides helper methods to access the state, dispatch operations, and register listeners.

The entire state/object tree of the application is kept in a single store.

Therefore, Redux is very simple and predictable.

We can pass middleware to the store to process the data and keep logs of various operations that change the state of the store. All operations return a new state via reduce.

11. What are the advantages of Redux?

Redux has the following advantages:

Predictability of results – Because there is always a real source, storage, there is no confusion about how to synchronize the current state with the rest of the operation and application.

Maintainability – Code becomes easier to maintain with predictable results and strict structure.

Server-side rendering – Simply pass the storage created on the server to the client.

This is useful for initial rendering and provides a better user experience because it optimizes the performance of the application.

Developer tools – From actions to state changes, developers can track everything happening in their applications in real time.

Community and ecosystem – There is a huge community behind Redux, which makes it easier to use.

A large community of talented people contributes to the library’s improvement and development of applications.

Easy to test – Redux’s code is mostly small, pure, and isolated functions.

This makes the code testable and independent.

Organization – Redux defines exactly how code is organized, which makes it more consistent and simple for teams to use.

Redux advantages

High maintainability.

The code is well organized, so it’s actually relatively easy to do the work.

Store created on the Server is forwarded to the client.

Convenient and powerful developer tools facilitate debugging and real-time development.

Small functions that basically only do one thing make the whole test very simple.

Understanding from a single source of fact?

The entire state of the program is stored in the store and received and updated from the Store itself. A single state makes it easier to track time changes and debug the program

Advantages:

  1. Predictability of results – Since there is always a real source, the Store, there is no problem of synchronizing the current state with the actions and the rest of the application.
  2. Maintainability – Code becomes easier to maintain, with predictable results and a strict structure.
  3. Server-side rendering – You simply pass the store created on the server to the client. This is useful for initial rendering and optimizes application performance to provide a better user experience.
  4. Developer tools – From actions to state changes, developers can track everything happening in their applications in real time.
  5. Community and ecosystem – Redux has a huge community behind it, which makes it even more fascinating. A large community of talented people has contributed to improving the library and developing various applications.
  6. Easy to test – Redux’s code is mostly small, pure, and self-contained. This makes the code testable and independent.
  7. Organization – Redux explains exactly how your code is organized, which makes it more consistent and simple for teams to use.

Router

Advantages:

You do not need to manually set historical values

Packages are separate: three-pack (Web, Native, core) applications are more compact and easy to switch between

HOOK

A brief introduction to what are hooks and the context in which hooks are derived? The advantages of hooks?

The hooks are used for the following problems when using React:

  • Reuse of state logic between components is difficult. Prior to hooks, reuse of components was implemented using higher-order components and Render Props, which essentially promoted reuse logic to parent components, easily generating many wrapper components and bringing nested regions.
  • Component logic becomes increasingly complex, especially when lifecycle functions often contain unrelated logic, and completely unrelated code is grouped together in the same method. This is very buggy and leads to logical inconsistencies.
  • Complex class components. To use the class component, you need to understand how this works in JavaScript. You can’t forget to bind event handlers and other operations. In addition, the Class component invalidates some react optimizations.

In response to the above, the React team developed hooks, which do two things:

  • Use to introduce state management and lifecycle methods into function components
  • Replace higher-order components and render props for abstraction and reusability

The advantages are also obvious:

  • It helps function components introduce state management and lifecycle methods to avoid the side effects of having to reconstitute class components in the later iterations of widely used function components.
  • After the Hooks appeared, we extracted the reuse logic to the top of the component instead of forcing it into the parent component. This way you can avoid the “nested regions” that HOC and Render Props bring
  • Avoid the problems presented by the class components described above

Hoc and render props

The Render Props and higher-order components are primarily used for abstraction and reusability. The downside is that both higher-order components and Render Props are essentially promoting reuse logic into the parent component, making it easy to create a lot of wrapper components and “nested territories.” Because all the abstract logic is hidden by other React components, the application becomes an unreadable tree of components. Visible components are also hard to track in the browser DOM.

What are Render Props and use scenarios

The Render props mode is a very flexible and highly reusable mode. It can encapsulate a specific behavior or function into a component and provide it to other components to make other components have such capabilities. It exposes the parts of the component that can be rendered dynamically to the outside world, so you don’t have to worry about the internal implementation of the component, just pass the data out through functions.

Usage scenarios

  • Extraction of common business logic
  • When there is A one-way dependence between two horizontal components, such as two homogeneous components A and B, component A needs to follow the internal state of component B to change its internal state, we say that A depends on B. Or B depends on A

UseEffect and useLayoutEffect?

UseEffect is a callback function that executes after render, but does not block the browser’s rendering. But class’s componentDidMount and componentDidUpdate are synchronized and run after render, so useEffect performs better than class in most scenarios.

The callback function in useLayoutEffect executes immediately after the DOM update is complete, but runs before the browser can do any drawing, blocking the browser’s drawing.

The pit in hooks, and why?

  1. You can use useEffect to set the status of useState only for the first time
  2. Each render has a new state, so the use of setTimeout in the above code generates a closure that captures the state after each render, resulting in output 0, 1, 2. If you want the output to be the latest state, you can use useRef to save the state. As mentioned earlier, the ref only has one copy in the component, and references to it do not change whenever they are used, thus solving problems caused by closures

Which are hooks?

  • UseState (), the status hook. Provides internal state for function components

  • UseContext (), shared hook. The hook is used to share state between components. React passes data layer by layer through the Porps. It accepts the result of react. CreateContext () as an argument.

  • UseReducer (), Action hook. UseReducer () provides state management. The basic principle is that users initiate actions in the page and change state through the Reducer method, so as to achieve the communication between the page and state. Use is much like Redux

  • UseEffect (), side effect hook. It takes two parameters, the first is the asynchronous operation to be performed, and the second is an array that gives the Effect dependencies

  • UseRef (), to get an instance of the component; Storage of shared data between render cycles (state cannot store data across render cycles because saving state triggers component rerendering) useRef passes in a parameter initValue and creates an object {current: InitValue} is used by the function component, and the object remains unchanged throughout its life cycle.

  • UseMemo and useCallback: references or values to cacheable functions. UseMemo is used to cache computed values. Often used in the following two scenarios (keep references equal; Use useMemo/useCallback for objects, arrays, functions, etc. used internally by components that are used in dependent arrays of other hooks or as props to downstream components.)

  • UseLayoutEffect: Effect is called synchronously after all DOM changes and can be used to read the DOM layout and trigger rerenders synchronously

What is the difference between hooks and hoc and Render props?

The hooks are only one development mode. The custom hooks are the API mode provided by React, which are more naturally integrated into the React rendering process and more in line with the React function programming philosophy.