[Dust] --- Redux --- [react]

1. flux Defects

 

Because dispatcher and store can have multiple mutual management operations, this is especially troublesome.

 

Ii. What is redux?

 

In fact, Redux is an advanced implementation of flux. It is an Application Data Flow Framework, mainly used for application state management.

 

Design Philosophy:

(1) A web application is a state machine with one-to-one views and statuses.

(2) Save all statuses in one object

 

Three Principles:

(1) single data source

The entire store is stored in an object tree, which only exists in the unique store.

(2) The State is read-only.

The only way to change state is to trigger action, which is a common object used to describe an event.

 

(3) Use pure functions to modify (CER)

To describe how the action changes the state tree, you need to write javascers

 

Iii. Applicable scenarios of Redux

 

(1) Complicated user usage

(2) users of different identities have different usage methods (such as common users and administrators)

(3) Collaboration between multiple users

(4) A large amount of interaction with the server, or websocket

(5) view needs to obtain data from multiple sources

Redux must be used when multiple projects interact and data sources exist.

 

From the component perspective, when will Redux be used?

(1) the status of a component that needs to be shared

(2) A status can be obtained anywhere.

(3) A component needs to change the global status

(4) One component needs to change the status of another component.

 

Iv. Redux Workflow

If we have a component, we need to obtain data from the store to obtain data. When the component needs to change the store data. YesCreate an actionAnd thenDispatch (Action) is passed to storeThen store forwards the action to the specified CERs. Then the CERs will getPreviusstate (previous State data) and Action. ThenPreviusstate and action are combined to make new data (store) Changes. Then a new data is generated and transmitted to the store. If the store sends a change, the view will also change.

 

 

5. Create a store

 

 

 

In flux, store is created manually, but in Redux, store is provided by Redux.

 

(1) install yarn add Redux -- Dev

 

(2) Import {createstore} from "Redux ";

 

(3) create a store = createstore (CER)

 

To create a store, we cannot store the value. Therefore, we need to pass the CER parameter in createstate, which is equivalent to the legacy product of Dispatcher in flux. The legacy product has a specification that must be a pure function internally.

 

(4) create CER Cer. js

This function has two parameters: State and action.

State indicates the data in the store.

Action refers to the action passed when the view modifies data.

 

This function must return a new data and cannot modify the old data. (the CER function cannot change the state and must return a new object)

 

We can set the default defaultstate for this state first. In the defaultstate object, we can define some initial data.

 

Official explanation of CER:

CER is just a pure function that receives the previous state and action and returns a new state. At the beginning, you can have only one reducer. As the application grows, you can split it into multiple small reducers and operate different parts of the State Tree independently, because CER is only a function, you can control the order in which they are called, pass in additional data, and even write reusable reducers to process some common tasks, such as the page splitter.

 

(5) export the store

 

The exported store object contains some methods by default.

(1) Dispatch: used to pass action

(2) getstate: The returned value is equivalent to the data in this. State, which stores public data.

(3) replacereducer:

(4) Subscribe: A function must be passed to listen for data changes.

(5), symbol (observable ):

 

6. Create an action

 

7. Pass action to store 

 

Method: store. Dispatch (Action)

After this method is called, the action is automatically passed to Cer CER, which is why we define the parameter action in cer Cer. In CER, we compare the type in action. If the comparison is successful, a new State is returned.

 

8. Monitoring data changes

Store. subscribe ()

 

 

9. How to split the CER into multiple reducers

 

(1) Introduce combinereducers

Import {combinereducers, createstore} from "Redux ";

 

(2) Merge multiple CERs

Let reducer = combinereducers ({todoreducers, tab1_cers })

 

(3) create a store

Let store = createstore (CER)

 

Chestnuts:

 

 

Note: When using state, pay attention to whose state is used.

 

10. Concepts of pure Functions

 

The same output must be obtained for the same input.

 

Constraints:

Parameter cannot be modified

System I/O APIs cannot be called

You cannot call non-pure methods such as date. Now () or math. Random (), because the values obtained each time are different results.

 

11. Differences between Redux AND FLUX

 

Redux does not have dispatcher and does not support multiple stores. Redux only has one single store and one root-level CER function. As the expected capacity grows, the root-level reducers need to be split into multiple small reducers, independent operations on different parts of the State, rather than adding new stores. This is like a REACT application with only one root component. This root component is composed of many small components.

[Dust] --- Redux --- [react]