How to understand redux-JS Tutorial-php.cn

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)

Copy after login

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 }

Copy after login

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) } }

Copy after login

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 }

Copy after login

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!