Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the three principles of Redux and its application". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

How Redux works

Redux manages the global state through store

After the view generation operation, an action is generated and dispatched to store through the dispatch (action) method.

Store will give the current status and the current action to reducer for processing. After reducer processing, you need to return a new status, then store can know the changes in the data, and then notify the view to get the latest data.

Basic concepts and api

Store

Store is an object used to maintain all state trees applied.

The only way to change the state within a store is to dispatch an action to it.

There can be only one Store for the entire application.

Store method

Provide the getState () method to get the state; provided dispatch (action) method to update the state; to register the listener through subscribe (listener); log out the listener through the function returned by subscribe (listener).

Reducer

Reducer is actually a pure function.

It takes two parameters, the first is the state state to be managed, and the second is action.

Reducer will operate on the action differently based on the type value of the passed state, and then return a new state instead of modifying it based on the original state, but if it encounters an unknown (mismatched) action, it will return the original state without making any changes.

Const reducer = (state,action) = > {switch (action.type) {case ADD_TODO: return newstate; default return state}}

Action

Action is essentially an object.

It is the only source of store data. It will deliver the data to Store.

Const action= {type:'ADD_TODO', payload:'redux principle'}

Three principles in application

When we use redux, we need to follow these three principles to avoid 90% of bug:

Single data source

We think of Store as a global object, which is unique, and all states are 'uniformly configured' in the state tree of Store.

State is read-only

If you want to change State, you must go through Action, and it is reducer that makes the action update effective on state.

This ensures that neither the view nor the network request can modify the state directly; instead, they can only express the intention to modify it.

Reducer must be a pure function

The execution within the Reducer must be without side effects, and the state cannot be directly modified. When the state changes, a brand new object needs to be returned to represent the new state.

This ensures that with the same State, you must get the same View.

What you need to follow is:

Can not rewrite parameters can not call the API of the system I O can not call impure methods such as Date.now () or Math.random (), because each time there will be different results, "what are the three principles of Redux principle and application". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.