Redux principle

The three core concepts of Redux

1, the action

1. Action object 2. Contains two attributes type: identifying attribute, value is string, unique, necessary attribute Data: data attribute, value type is arbitrary, optional attribute 3. Example :{type: 'ADD_STUDENT',data:{name: 'Tom ',age:18}}Copy the code

2, reducer,

1. Used for initialization and processing. During processing, pure functions of the new state are generated based on the old state and actionCopy the code

3, store

1. Objects that link state, Action and Reducer together; 2. How do I get this object? 1)import {createStore} from 'redux' 2)import reducer from './reducers' 3)const store = createStore(reducer) 3. What does this object do? 1)getState(): getState; State value can be obtained directly from store.getState(). 2) Dispatch (action): Distribute the action, trigger the reducer call, and generate a new state. You can call dispatch(Action) directly from the component; 3) Subscribe (listener): register to listen, automatically call when a new state is generated; Register in index.js as shown below:Copy the code

Redux’s core API

1, createstore ()

Create a store object that contains the specified reducerCopy the code

2. Store objects

Function: the core managed object of redux library 2. Internal maintenance: 1)state 2) Reducer 3 Core methods: 1)getState() 2) Dispatch (action) 3)subscribe(listener) 4. 1)store.getState() 2)store.dispatch({type:'INCREMENT', number}) 3)store.subscribe(render)Copy the code

  1. applyMiddleware()

    What it does: Redux-based middleware (plug-in library) on applicationsCopy the code

  2. combineReducers()

    Function: Combine multiple Reducer functionsCopy the code

Asynchronous programming

  1. To understand:

    1. Redux cannot be processed asynchronously by default. 2.Copy the code

  2. Using asynchronous middleware

     npm install --save redux-thunk
 
Copy the code

  3. Instead of returning an object, an asynchronous action will return a function whose first argument is dispatch, from which other actions will be dispatched

  1. Redux-thunk, createStore;

Five, the code

Link: pan.baidu.com/s/1D_PwU8jd… Password: 02CG — share from Baidu webdisk super member V2