1. Why redux?

We all know that in React, data is bound individually within components. A parent component can pass data to a child component through props, but passing data between siblings is more cumbersome. Redux can solve this problem.

2. Design concept of Redux

Redux stores the state of the entire application in a common store file. Components can dispatch an action or action to the common store instead of notifying other components directly. The component internally refreshes its own view through the state state in the subscription store. My personal understanding here is that we have a kind of listener inside our component that will refresh our page whenever it listens for a value change in the Store.

3. Three Principles of Redux

  • Unique data source

The entire application’s data is stored in a unified state tree, known as a common store file. All components get data from this store.

  • Keep it read-only

State is read-only, and the only way to change state is to trigger an action, which is a common object that describes when it happened.

  • Data changes can only be performed by pure functions

To use pure functions to make changes, you need to write reducers to describe how actions change state.

4. Detailed analysis of redux principle

Here’s a closer look at how Redux works

4.1 Store

Redux is designed to solve the problem of one-way flow of data in React. When it comes to data, we mentioned in the previous page, Data in redux is stored in a state tree store, so:

  • A store is a place where you store data, you can think of it as a single piece of data, and the entire application can have a store.
  • Redux provides the createStore function to generate a store.
    import {createStore} from 'redux'
    const store=createStore(fn);
Copy the code

4.2 the State

A store can have multiple states. Redux specifies that one state corresponds to one View. If the state is the same, the View is the same, and vice versa.

    import {createStore} from 'redux'
    const store=createStore(fn);
    const state=store.getState()
Copy the code

4.3 the Action

Redux provides an Action object, which we can understand as a behavior or an Action, in order to change the state. That is, this action can change state, and it is the only way to change state.

    const action={
      type:'ADD_TODO'// The action name must exist payload:'redux'
    }
Copy the code

4.4 store. The dispatch ()

Store.dispatch () is the only way for a view to issue an Action. To explain, in a view, the user triggers an Action or simply clicks a button, and the Action needs to be triggered if the state value needs to be changed. Store. dispatch takes an Action as an argument and sends it to the Store to inform the store to change the state.

    const action = {
        type:'ADD_TODO',
        payload:'redux'
    };
    store.dispatch(action);
Copy the code

4.5 Reducer

When the Store receives the Action, it must give a new state for the view to change. This state calculation process is called Reducer. Reducer is a pure function that takes the Action and the current state as parameters and returns a new state.

    const reducer =(state,action)=>{
      switch(action.type){
        case ADD_TODO:
            return newstate;
        default return state
      }
    }
Copy the code

The principle of Redux has been introduced. If you have different understanding, please send a message. If there is a bad place to write, please give me more advice. I will continue to update technical articles on the front end.