“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

React: redux: redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux: Redux

React-redux react-redux react-redux I’m looking at version 8.0.0-alpha.1, which is a redux to React library written in typescript and React Hook. The SRC directory is as follows:

SRC ├── Alternate ├─ ├─ ├.ts │ ├─ ├.ts │ ├.ts │ ├─ ├.tx │ ├── MapDispatchToProps. Ts │ ├─ Heavy Metal Exercises - - Heavy metal Exercises ├── ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises ├── exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises IsPlainObject. Ts ├ ─ ─ reactBatchedUpdates. Native. Ts ├ ─ ─ reactBatchedUpdates. Ts ├ ─ ─ shallowEqual. Ts ├ ─ ─ UseIsomorphicLayoutEffect. Native. Ts ├ ─ ─ useIsomorphicLayoutEffect. Ts ├ ─ ─ verifyPlainObject. Ts └ ─ ─ warning. The tsCopy the code

Its connect function has a very, very, very long list of function overloads and very, very, very long types that leave me winking at the end of my browsing experience, so pass on that and check out the hooks that are familiar to me.

  • UseStore is used to create a store for state management. React useContext consumes a ReactReduxContext created in context. ts. This context has two fields, Store and Subscription;
  • UseDispatch is to fetch the dispatch function from the store;
  • UseReduxContext also consumes ReactReduxContext
  • UseSelector is basically passing in a selector to pick the state in the store that matches the criteria.

Look at provider. ts in components, which provides the Provider component for ReactReduxContext. Components according to the incoming store to create a subscription, and will store and subscription as a contextValue incoming ReactReduxContext. The value of the Provider. This makes sense when we use react-redux. By wrapping the Provider around the root component, the store is accessible to all components of the entire application.

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducers'
import App from './components/App'

let store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>.document.getElementById('root'))Copy the code

The main focus of the util folder is the Subscription. Ts and bindActionCreators. Ts, the former of which creates a subscriber object, with the following interface:

interface Subscription {
  addNestedSub: (listener: VoidFunc) = > VoidFunc
  notifyNestedSubs: VoidFunc
  handleChangeWrapper: VoidFunc
  isSubscribed: () = > booleanonStateChange? : VoidFunc |null
  trySubscribe: VoidFunc
  tryUnsubscribe: VoidFunc
  getListeners: () = > ListenerCollection
}
Copy the code

The file also has a function called createSubscription, which accepts both store and scription arguments and returns a new Subscription object. The main function of addNestedSub is to add a Listener callback to the Subscription object, and when the notifyNestedSubs function is executed, all the listener callbacks of the object are executed. AddNestedSub is called an additional time to the parent Subscription when addNestedSub is called for the first time. The listener callback is the handleChangeWrapper for child Subscription. The content of this function is that the Subscription is automatically executed when the onStateChange function is defined, and isSubscribe becomes true when the listener callback is added.

The rest of the connect folder and the Connect.tsx folder are not very legible, so I’ll leave it there for now and come back to it the next time I look at the redux source code.