Getting Started with redux

Brief Introduction

Redux is a very useful framework, and he mainly solves the problem of unified management of State. React, however, treats all components as state machines, so redux can be viewed as a react data management center. Note, however, that it is not necessary to manage data with Redux, but that the framework makes complex business logic and multiple component communications more convenient.

Redux's thoughts are mainly summed up in the following 2 points:

The A.web application is a state machine, and the view is one by one corresponding to the state.

B. All states, stored in a store object.

This state is a single object in which all status data is maintained in a state tree, the server is easily initialized, state is only triggered by Dispath (action), and update logic is performed by Reducer.

Concept Description

Store

The store is a storage object that holds all the data, and the entire application has only one store object.

Redux provides CreateStore (FN) to generate a store object

Import {CreateStore} from ' Redux ';
Const STORE = createstore (FN);

Store.getstate (): Get current status

Store.dispatch (Action): is used to trigger the state update, and the action is emitted.

Store.subscribe (Lister): Registers a state change listener, returns a function, and calls the function to dismiss the listener.

CreateStore (Reducer,[initalstate]): Create store Object

State

The Store object contains all the data, and if you want to get data at a certain point, you need to generate a snapshot of the store, and the resulting snapshot data collection is called state. The state of the current moment can be obtained by store.getstate ().

Import {CreateStore} from ' Redux ';
Const STORE = createstore (FN);

Const STATE = Store.getstate ();

Action

Changes in state will result in changes to the view, but the user can only manipulate the view, so the view must be manipulated to affect the state of the change, action is to inform the view of the operation, the State should also make corresponding changes to render the effect of the view operation.

The action is an object that has the following properties:

The name of the type:action, usually a string constant or symbol, must be.

Payload: Carry information, any type of value, optional. If the error is true, payload is an Error object.

Error: Operation wrong ID, any type of value, optional.

Other information outside the meta:payload, any type of value, optional.

Const ACTIONNAME = "redux test";

function Addaction (text) {return
    {
        type:actionname,
        payload:text
    }
}

const Newaction = Addaction ("Learn redux");

Reducer

When the store receives the action, it must return a new state so that the view is rendered again, and the process of calculating the new state is called Reducer.

Reducer is a function that accepts 2 arguments, the current state and the action, and returns a new state.

Const REDUCER = function (state, action) {
  //...
  return new_state;
};

Redux's working principle:

1. First, define the components;

2. Invoke Stroe.dispatch (action) in the component triggering event, issue action, and automatically execute reducer function;

3. Define a good reducer object to handle the action that the component sends;

4. Create the store object according to the defined Reducer object;

5. Create the listener to render the interface again after the store changes. Store.subscribe (Lister)

Example

Import {CreateStore} from ' Redux ';
Import react from ' react ';

Import reactdom from ' React-dom '; Let Countreducer = (state=0,action) => {//Step two: Define REDUCER execute function switch (action.type) {case ' add ': state = 1 
        ;
    Break
        Case "Substrat": state-= 1;
    Break
Default:break} return state; Let store = CreateStore (countreducer);//Step Three: Create store object Let Addcount = () =>{//addition operation Store.dispatch ({type 
        : "Add", Payload: "Add 1 at a time}"} Let substractcount= () => {//subtraction operation Store.dispatch ({type: "Substrat",
                Payload: "1 per Minus"})} const render = () => {Reactdom.render (//First step: Define component <div>  

Effect Chart:




Click on + number, number plus 1, click-Number, number minus one.