React-redux principle

Link to the original article

The redux principle is covered in a previous article. I will mount the store object returned by Redux into the window.

const reducer = combineReducers({ home: homeNumber, number: }) const store = createStore(reducer) window.$reduxStore = window.$reduxstore.dispatch (action); let { state } = window.$reduxStore.getState()Copy the code

React redux+ redux+react redux+react redux+react redux+react redux [The following is the latest version of [email protected] library parsing] (the following source part omitted)

# the Provider function

React-redux provides a component to mount the store object returned by Redux, while treating the entire application as a child of the Provider.

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)
Copy the code

Here’s what the component does:

Function Provider({store, context, children}) { Store and subscription const contextValue = useMemo(() => { Below specifically said to const subscription = new subscription (store) subscription. The onStateChange = subscription. NotifyNestedSubs return {  store, subscription } }, [store]) //... // ReactReduxContext = React.createContext(null) const Context = context || ReactReduxContext return <Context.Provider Value ={contextValue}>{children}</ context.provider >} https://github.com/reduxjs/react-redux/blob/master/src/components/Provider.js#L6Copy the code

Provider receives three parameters: Store receives a Store object, context receives a context object, and children receives a ReactElement element. Context.Provider API: All consumer components within the Provider are re-rendered only when the Provider’s value changes.

Mount the contextValue on the Provider, which contains a Store object and a subscription publication Subscription object, ready to be retrieved by the Connect component. Subscription, which is responsible for updates to connect and Provider components, is a core component, which is covered below.

# connect function

Common use examples of connect:

return connect(mapStateToProps, mapDispatchToProps)(Component)
Copy the code

The connect function is a higher-order Component that passes the above parameters to the function and returns a new Component that mounts properties such as state and dispatch on the Component props.

import hoistStatics from 'hoist-non-react-statics' import { ReactReduxContext } from './Context'; Function ConnectFunction (props) {//... // Check whether there is store & getState & dispatch for props, Var didStoreComeFromProps = Boolean(props. Store) && Boolean(props. Store. GetState) && Boolean(props.store.dispatch); Var ContextToUse = useMemo(function () {return propsContext && propsContext.consumer && isContextConsumer(<propsContext.Consumer />) ? propsContext : Context }) // contextValue = { store, subscription } var contextValue = useContext(ContextToUse) // ... Var overriddenContextValue = useMemo(function () {if (didStoreComeFromProps) {return contextValue  } return { ... contextValue, subscription } }, [didStoreComeFromProps, contextValue, subscription]); / /... // props == props, Const renderedWrappedComponent = useMemo(() => <WrappedComponent {... actualChildProps} ref={forwardedRef} />, [forwardedRef, WrappedComponent, ActualChildProps]) var renderedChild = useMemo(function () {// If mapStateToProps exists (shouldHandleStateChanges) { return ( <ContextToUse.Provider value={overriddenContextValue}> {renderedWrappedComponent} </ContextToUse.Provider>)} // renderedWrappedComponent return renderedWrappedComponent}, [ContextToUse, renderedWrappedComponent, overriddenContextValue]); return renderedChild; } / /... Return hoistStatics(ConnectFunction, WrappedComponent)Copy the code

hoistStatics

Assign hoistStatics(targetComponent, sourceComponent), hoist-non-react-statics. ConnectFunction is the core function in the above code, although the middle part of the code is omitted, but the essence is left.

In the ConnectFunction function, get the Provider component’s contextValue object via hooks useContext; RenderedWrappedComponent will actualChildProps

Passed in as props, actualChildProps is the processed props property, with the dispatch function and state properties already mounted on it; The renderedChild component is actually what the connect function returns at the end. (The middle part of the code omitted the source link jump)

This is the actual code that the Provice and Connect components go through when they are called for the first time. There are some cuts, of course, but most of them are covered.

What happens when Dispatch is called? Not mentioned in the previous section at all, let’s look at how the React-Redux component is updated inside the react-Redux after the Dispatch (Action) call.

How is # Connect updated?

When the Dispatch function is called in the React application, the Reducer function is actually called in redux and the new state is returned. Redux-react connect updates the connect component in redux-React.

dispatch(action)
Copy the code

I’m not going to read the code, but just talk about the basic process.

# initialization

The Subscription function is registered when the Provider component is called to register:

const subscription = new Subscription(store)
Copy the code

In redux-React, subscribe to the publication function Subscription

Is the core function (subscription publishing mode is at its core), which effectively ensures the update rendering of connect components. Store is passed inside the Subscription constructor as an argument and is used inside the Subscription constructor.

# subscription

Return connect(mapStateToProps, mapDispatchToProps)(Component) // React-redux, Is responsible for updating the connect components subscription. The onStateChange = checkForUpdates / / redux save function trigger notifications store.subscribe(subscription.notifyNestedSubs); / / the react - redux save update subscription function. Listeners. The subscribe (subscription. The onStateChange)Copy the code

When the CONNECT component is used, the Subscription object in the React-Redux takes the checkForUpdates update function of the CONNECT component as an argument stored in the subscription array next. At the same time, the same thing happens with redux. (Code in simplified version)

// Listeners = [] subscribe(listener) { // React-redux subscribe function let next = [] subscribe(listener) { next.push(listener) }Copy the code

checkForUpdates

The connect function is responsible for internal status updates of the CONNECT component.

The notifyNestedSubs function is an update function that triggers the Subscription object in react-Redux, and is stored in the nextListeners array so that when the Redux dispatch function is triggered, The notifyNestedSubs notification function is called, which triggers the checkForUpdates function of the Connect component of React-Redux.

React-redux: checkForUpdates function source code

React-redux: Subscription function

# Release (update)

The state value of the Store is modified, the nextListeners subscription array of redux is updated, and the notifyNestedSubs is invoked. Also, this causes the next array in React-Redux to trigger a traversal call. Both libraries are basically the following code

let next = listeners;​
for (let i = 0; i < listeners.length; i++) {
  listeners[i]()
}
Copy the code

The above details may be omitted, but it is basically a subscription, saving the update function into the subscription array, and then iterating through the subscription array when the Dispatch function is called to complete the update of the CONNECT component.

In the latest React-Redxu library, there are a number of React-hooks. I don’t have to explain them too much. (High-order components, React Hooks, subscribe publish mode)

See more blog posts:

Personal gold digging more articles link jump;

GitHub blog project links to more articles jump;