Redux Basics

redux design ideas

1. A web application is a state machine, and there is a one-to-one correspondence between views and states.
2. All state is stored in an object.

In layman's terms, the web page is bound to the data, and the change of the web page is triggered by each data change. A simple process is like this, the data changes in redux are triggered by requirements (events), and the data changes trigger the web interface to make corresponding changes. So redux is a one-way flow of operations, driven by data.

Using a simple redux needs to know a few basic concepts

store, state, action, store.dispatch(), Reducer, store.subscribe(listener)
1. store
store is an entity and operation object that redux saves data, and the entire application has one and only one. The way the data is stored inside is stored in the form of key-value pairs. The first thing we need to know is how to generate the store:

import { createStore } from 'redux';
const store = createStore(fn);

2.
State state is a snapshot of the internal data of the store. A bit abstract, in simple terms it is all the data stored in the store at a certain time. Obtained by store.getState(). Its significance is that when the data in the store changes and drives the component (the basic unit of the web view) to change, the component needs to get the latest data (state) and make corresponding changes according to the data. So it is very important that the store must be directly or indirectly passed to any component (requiring data) in order to obtain the state.

3. Action and store.dispatch()
I said before that the workflow of redux is the change of the data (state) in the store to trigger the change of the component. But we cannot directly change the data in the store. To modify the data in the store, redux provides the only method store.dispatch(action) . store.dispatch is a function, there is not much to say, it is to send the action object to the store. Mainly action, action is essentially an ordinary object. This object is special in that it must have an attribute type, which is the action.type mentioned above (the value of type is the meaning of "key", the purpose is to tell the store what data to process and how to process it) . Then it is to add other required data to this object.
Example:

store.dispatch({
  type: 'ADD_ONE',
  selfdata: '1'
});

4.
When the store receives the action, the reducer needs to process the data according to the content of the action. The reducer is the function that processes the data, and the code is directly added:

import { createStore } from 'redux';

const defaultState = 0;
const reducer = function(state = defaultState, action){
  switch (action.type) {
    case 'ADD_ONE':
      return state + action.selfdata;
    default: 
      return state;
  }
};
const store = createStore(reducer);

store.dispatch({
  type: 'ADD',
  selfdata: 1
});

The reducer function is passed to the store as a parameter of createStore. When store.dispatch is executed, the store will call the reducer function. The reducer function defines how to process data. The return value is the current latest state.
5. store.subscribe(listener)
store.subscribe(listener) is a listener function. When the store executes the reducer and the data is changed, the listener function is called. The listener function is the operation that needs to be performed after the user-defined data is changed, that is, triggering the component update. example:

    let unsubscribe = store.subscribe(() =>
      console.log(store.getState())
    );
    //执行该方法解除监听
    unsubscribe();

Summary:
A simple redux process is roughly like this:
1. The user triggers an event to call store.dispatch(action)
2. The store calls the reducer function to process the data according to the action
3. The data change triggers the store to call the listener function to execute the listener method to change the web view

Of course, a series of encapsulation processing is required in real projects, and such a simple process cannot meet some requirements. For example, multiple reducers need to be written to process data, and specific components need to be updated according to changes in different data. However, the most complex process is extended from this most basic process. Understanding this process and grasping its principle is very helpful to understand the encapsulated redux in future projects.