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

This article mainly explains "what are the basic knowledge points of redux". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the basic knowledge points of redux"?

What is redux?

1.redux is a JS library (not a react plug-in library) dedicated to state management.

two。 It can be used in react, angular, vue and other projects, but basically with react.

3. Role: centralized management of the state shared by multiple components in a react application.

When do you need to use redux

1. The state of a component needs to be available to other components at any time, resulting in a sharing situation.

two。 One component needs to change the state of another component, not just a parent-child relationship, but all components in a project can call this state or method.

3. Use the redux principle: don't use it if you can, and consider using it if you don't have to work hard. It is usually used in large projects where communication between components is more complex. Small projects do not need to be used as far as possible.

Redux workflow

Three core concepts:

1.action (the object of the action)

Contains 2 attributes

Type: identify attribute, value is string, unique, required attribute

Data: data attribute, arbitrary value type, optional attribute

Example: {type: 'ADD_STUDENT',data: {name:' tom',age:18}}

2.reducer (for initialization status, processing status)

When processing, according to the old state and action, a new pure function of state is generated.

3. Store (an object that connects state, action, and reducer)

Usage

Import {createStore} from 'redux'

Import reducer from'. / reducers'

Const store = createStore (reducer)

The function of this object

1) getState (): get state

2) dispatch (action): distribute action, trigger reducer call, and generate new state

3) subscribe (listener): register listening, which is called automatically when a new state is generated

Core API of redux

1.createstore ()

Creates a store object that contains the specified reducer

2.store object

Role: the core management object of the redux library

It is internally maintained: state and reducer

Core method:

1) getState ()

2) dispatch (action)

3) subscribe (listener)

Specific code:

1) store.getState ()

2) store.dispatch ({type:'INCREMENT', number})

3) store.subscribe (render)

3.applyMiddleware ()

Middleware based on redux (plug-in Library) in Application

4.combineReducers ()

Merge multiple reducer functions

At this point, I believe you have a deeper understanding of "what are the basic knowledge points of redux?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.