React-redux Summary

I. Definition and function

React-redux divides all components into two main categories: UI components (presentational component) and container components (container component)

1. UI Component Features:

• Only responsible for UI rendering, without any business logic
• No state (i.e. not usingthis.statethis variable)
• All data is provided by parameter (this.props)
• Do not use any of the Redux APIs

2. Characteristics of container components:

• Responsible for managing data and business logic, not responsible for UI rendering
• With internal state
• Using the Redux API

Summarize:

The UI component is responsible for rendering the UI, and the container component is responsible for managing the data and logic.

React-redux stipulates that all UI components are provided by the user and that the container components are generated automatically by React-redux. In other words, the user is responsible for the visual layer, and state management is all given to it.

Second, the use and method

1. Connect method Input UI component, Output container component

React-redux providesconnectmethods for generating container components from UI components.

// TodoList-> UI component; VisibleTodoList-> container component
// mapStatetoProps, mapDispatchToProps-> They define the business logic of the UI components.
// mapStatetoProps can be omitted. If omitted, UI components will not subscribe to the Store, which means that updates to the Store will not cause updates to the UI components.
import {connect} from ‘react-redux’
const VisibleTodoList = connect (mapStatetoProps, mapDispatchToProps) (TodoList); 

(1)mapStateToProps(state [,props]) is responsible for the input logic, the parameters that will bestatemapped to the UI component (props)

state: 必选，state对象；props: 可选，代表容器组件的props对象
mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数(props)，从而触发 UI 组件的重新渲染。

// map Redux state to component props (map Redux state to component props)
const mapStatetoProps = (state) => {
    return {num: state}
}
// After using ownProps as a parameter, if the container component's parameter (ownProps) changes, it will also cause the UI component to re-render
const mapStateToProps = (state, ownProps) => {
   return {
     active: ownProps.filter === state.visibilityFilter
   }
} 

(2) Mapdispatchtoprops is responsible for the output logic that maps the user's actions on the UI component to action.

 
// map Redux actions to component props (把 Redux actions 映射到 component props) const mapDispatchToProps = dispatch => { return {
    onIncreaseClick: () => dispatch(increaseAction)
  };
}

There are two types of mapdispatchtoprops: Functions and objects

mapDispatchToPropsis a function that getsdispatchandownProps(the object of a container componentprops) two parameters.

mapDispatchToPropsAs a function, you should return an object in which each key-value pair is a map that defines how the UI component's parameters emit the Action

const mapDispatchToProps = (
  dispatch,
  ownProps
) => { return {
    onClick: () => {
      dispatch({
        type: ‘SET_VISIBILITY_FILTER‘,
        filter: ownProps.filter
      });
    }
  };
}

mapDispatchToPropsis an object, the key name is a parameter of the same name that corresponds to the UI component, and the key value should be a function that will be treated as action creator, and the returned Action will be emitted automatically by Redux

const mapDispatchToProps = {
  onClick: (filter) => {
    type: ‘SET_VISIBILITY_FILTER‘,
    filter: filter
  };
}

III. Principles and processes

In order for subcomponents to be able to obtain the context property, react forces the root component (here, the provider component) to provide Getchildcontext instance methods, as well as class property childcontexttypes. The child component must also define the class-level counter if it wants to get the context. The Contexttypes property. The definition is bidirectional, and if any piece is missing, the child component gets the context property.

I think that the definition of the parent component is implemented in the provider code, and that part of the subassembly is implemented in the Connect method.

So the context property that the Connect method adds to the counter component is essentially passed down by provider, The state parameter in the Mapstatestoprops method is essentially obtained by the This.context.store.getState () method.

The flow of the entire logic after the first load of the page and after the interactive behavior:

(1) The initial state acquisition process in the store when the page is first loaded:
CreateStore (reducers,defaultparams) call, where reducers can make a reducer, but also redux.combinereducers a collection of reducer.

The CreateStore method dispatch an action with an [email protected] @redux/init type for each reducer, and this action is generally not reducer in handle code. The default block is dropped directly, so the state is returned.

It is then generally reactdom.render () to render the application, and the container component of each subassembly is given the state object by passing in the This.context.store.getState () method. And the Ownprops on the container component to the Mapstatestoproperties method to build the props and finally apply the props to the child component's UI component.

(2) The whole logic after the interactive behavior:

When an interaction occurs on a subassembly, such as Click, Mapdispatchtoprops defines the mapping of which action should be dispatch when the click is triggered.
After the store receives this action, it will make reduce, get the latest state, and then call all the subcomponents of the Mapstatestoprops method to generate the new props.
Finally, the provider is re-rendered. Of course, many of the state of the above events may not have changed, so the diff algorithm does not modify the components that do not change, so the performance is better.

React-redux Summary