Introduction to basic use of redux (i)

Basic Concepts and APIs

Redux:
Store: Store, store State container
Status: State is the data to be used in the application
Actions: Action, defining data manipulation
Notification: Dispatch, sending an action request
Functions: Reducer, the business logic that processes data first creates the shop (store)

Get a data container: Store let
store=redux.createstore (  fn  );
Console.dir (store);

Redux.createstore () can pass 2 parameters, one is the reducer function to handle the state, later on state operations are implemented through the reducer. The other is the initial value of the data, which exists in the store. Cases:

  var users = [
            {username: ' Xiao Tao ', Gender: ' Man '},
            {username: ' Little Red ', Gender: ' Female '}
        ];
Let Store=redux.createstore (  reducer,users   )

A brief introduction to the store

Console.dir (store) There are many ways to see the store underneath

Here are the first 2 methods:
GetState (): Get the data from the store, usage: store.getstate ()

Dispatch (): Manipulating data and notifying reducer (later in detail) Dispatch method

If you need to modify the data, you need to use the dispatch method of the store object to implement
Dispatch receives an object parameter that must contain a type attribute and type is the action type description
We call the dispatch incoming parameters as: action

  Store.dispatch ({
    type: ' ADD ',
    newvalue: {username: ' Xiao Li ', Gender: ' Man '}
  });

Introduction to Reducer function

Create reducer function
let reducer = (state, action) =>{
//state is all the data stored in the store
//action is a view issued by the notice, indicating state Should have changed.
//action is an object. The type attribute is required to represent the name of the action.
//When we call Createstore,reducer is the first call, state has no value
switch (action.type) {
//Here's case ' ADD ' Is the same type as the Store.dispatch definition. Store.dispatch execution is to trigger the call of the REDUCER function, the REDUCER function will find the corresponding Action.type data processing, change (increase and deletion, etc.) case
       ' ADD ': return
            [ Action.newvalue, ... state];  
        Default: Return state
            ;
    }

Work Flow carding

Redux:
Store: Store, store State container
Status: State is the data to be used in the application
Actions: Action, defining data manipulation
Notification: Dispatch, sending an action request
Function: Reducer, the business logic of processing data first creates a store for storing data let Store=redux.createstore (reducer,state) user to issue action Store.dispatch (action) ; The Store then automatically invokes reducer and passes in two parameters: the current state and the Action received. Reducer will return to the new state. Let reducer = (state, action) => {
Switch (action.type) {
Case ' XX ':
return [Action.newvalue, ... state];
Default
return state;
}
}
Once the 4.State changes, the Store will invoke the listener function. Setting up a listener function
Store.subscribe (listener);
Listener can get the current state by Store.getstate (). If you are using react, you can trigger the View to be rendered again.

function Listerner () {let
  newstate = Store.getstate ();
  Component.setstate (newstate);   
}