I. Redux concept:
Redux isPredictable container status. In other words, it is an application data stream framework, rather than a traditional library or framework like underscore. js or angularjs.
Ii. Differences between Redux and flux:
Redux is similar to flux. The main difference is that flux hasMultiple Stores that can change the application status, It usesEvent to triggerThese changes. The component can subscribe to these events to synchronize with the current status. ReduxNo distributor dispatcherBut in flux, dispatcher is used to pass data to the registration callback event. Another difference is that many extensions are available in flux, which also brings about confusion and conflict.
Iii. Benefits of Redux:
- Maintenance:With predictable results and a strict organizational structure, the code is easier to maintain.
- Prediction: There is always an accurate data source, that is, store. It is never confusing how to synchronize actions and other parts of the application and the current status.
- Organization:Code should be organized more strictly, which makes code more consistent and easier for team collaboration.
- Test:The primary criterion for writing testable code is to write small functions that can only do one thing and are independent. Almost all Redux code is such a function: Short, pure, and separated.
- Server rendering:It can bring a better user experience and help search engine optimization, especially for the first rendering. You only need to pass the store created by the server to the client.
- Developer Tools:Developers can track what is happening in the application in real time, from actions to state changes.
- Community and ecosystem:There are many communities that support Redux so that it can be used by more people.
Iv. core concepts of Redux:
Redux has three core concepts:
Actions
ActionsIs an event. Actions transmits data from this application (user interface, internal events such as API call and form submission) to store. Store only obtains information from actions. Internal actions is a simple JavaScript Object with a type attribute (usually a constant). This object describes the action type and the load information passed to store.
The core code is as follows:Reducers in functional JavaScript receives a callback based on the array reduce method, allowing you to obtain a single value, integer sum, or a series of values from multiple values. In Redux, CER is a function that obtains the current state and event of the application and returns a new state. Understanding how reducers work is critical because they do most of the work. This is a very simple reducer. by obtaining the current state and an action as the parameter, return the next state: for more complex projects, use the combinereducers () provided by Redux () instances are necessary (recommended ). It combines all Reducers in this application into a single index CER Cer. Each CER is responsible for the status of its own application, which is different from that of other reducer. The combinereducers () instance makes the file structure easier to maintain. If an object (state) only changes some values, Redux creates a new object. unaltered values will point to the old object and new values will be created. This is excellent for performance. To make it more efficient, you can add immutable. js.
The core code is as follows:
The store object stores the application status and provides some help methods to access the status, distribution status, and registration listening. All States are represented by one store. Any action returns a new State object through CER Cer. This makes Redux very simple and predictable.
The core code is as follows:
V. Redux installation commands and introductionCommand: NPM (CNPM) install Redux -- save-dev Introduction: Import {creactestore} from "Redux ";
Vi. Redux's understanding
1. When the user triggers the event actions, dispatch (Actions) will carry data to the store
2. When the store receives the data, the store will secretly send the data to reducers through previusstate.
3. reducers processes the received data and transmits the data to the store through newstate.
4. Store receives the data returned by javascers and passes the data to the DOM page through the state. Then, the user can see the data he modified.
Note that: Reducers (1 must have an initial data; 2. reducers must be a pure function; 3. The state can only be read and cannot be modified)
[※Mock] --- Redux --- [react]
