How to understand redux

Redux Principle

A company has three businesses: logistics (actionType), e-commerce (actionType), and advertising (actionType) , the funds earned from the three businesses are uniformly recorded in the company's financial system (state). One day, the e-commerce business sold 1 million worth of goods (actions) on the company's e-commerce platform. The funds earned were sent to the business's financial department in the form of invoices (dispatch). The financial department calculated the earnings through its own business blocks. The profit obtained (reducer) is then updated to the financial system (state).

Core principle: Through an event action, the results are sent to the reducer through dispatch. In the reducer, different business processes are performed on the data according to different actionTypes, and then the final results are updated into the state tree.

Since several of my bosses keep a close eye on the company's funds and must always pay attention to changes in funds, they set up an event (subscribe) to send a text message to notify them (listener) when there is a change in funds.

Principle: Redux has a built-in listeners array that allows external subscriptions to state data change events. When the data in the state tree changes, all listening events will be notified.

API explanation

function createStore(reducer, preloadedState, enhancer)

In the createStore method, the entire redux environment is initialized. preloadedState serves as the initial value of the state tree. This method returns the open interface of redux, and the state of redux can only be operated through the returned api.

CreateStore returns the returned API:

##

 return {
    dispatch,
    subscribe,
    getState,
    replaceReducer,
    [$$observable]: observable
  }

store.getState: Returns the state object currently maintained by redux;

store.subscribe : You can register subscription events through this interface, that is, when the state of redux is accessed (regardless of whether the data in the state is modified or not), redux will traverse all registered events.

function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners()
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners()
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1)
    }
  }

Store.dispatch: After the event action is run, push the results to the reducer through dispatch. The result of the action must be an ordinary js object, and must contain a type attribute. In the reducer, the data can be processed differently based on the type, and then updated to the corresponding state.

After the reducer, all listening events will be traversed regardless of whether the data has changed or not.

function dispatch(action) {
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }

    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    const listeners = currentListeners = nextListeners
    for (let i = 0; i < listeners.length; i++) {
      const listener = listeners[i]
      listener()
    }

    return action
  }

The entire single-page application only needs to call the createStore method once, and then ensure that the initialized object is globally available, so as to achieve unified management of data through redux.

The above is the detailed content of How to understand redux. For more information, please follow other related articles on the PHP Chinese website!