Why does React need state management

React is just an abstraction layer of the DOM, not a complete solution for Web applications. Communication between components and better code structure are often considered when building large applications;

Flux

In 2014, Facebook introduced the Flux architecture;

The core idea is to use one-way data flow to process data. There are the following basic concepts:

The View; The view layer, which refers to the part that the user can see;

Store: The data layer, the method for storing applications and data;

Action: name meaning, refers to the action, that is, the message object of the data change;

Dispatcher: Actions sent to store

As shown in the figure below, the data in flux is always “one-way flow”, and the “two-way flow” of data will not occur in any adjacent part.

Redux

In 2015, Redux was born. Its essence is the implementation of Flux architecture in function programming, which has nothing to do with React.

There are two core ideas:

  • A Web application is a state machine, and there is a one-to-one correspondence between views and states.

  • All state is stored in a single object (single data source).

And two operating principles:

  • Keep state only read-only;

  • Data changes were accomplished by a pure reducer function.

The core concepts are as follows:

Store

There is one and only one place to save global data, passed in through the createStore method provided by Redux;

const store = createStore(reducer);
Copy the code

State

The Store object contains all the data. If you want data at a point in time, take a snapshot of the Store. This collection of data at this point in time is called State. One State corresponds to one View. As long as the State is the same, the View is the same. The current State can be obtained from store.getState();

Action

If the State changes, the View changes. However, the user does not touch State, only View. Action is the bridge between view and state. A data structure is an object; Store.dispatch (action) is the only way a View can issue an action;

const action = { type: 'ADD_TODO', payload: 'Learn Redux' };
Copy the code

Action Creator

Action generates the function

function addTodo(text) { 
    return { 
        type: ADD_TODO, 
        text 
    } 
}
Copy the code

 Reducer: 

The reduce method, which can be likened to an array, is a pure function with the following characteristics:

1. The same input always returns the same output

2. Do not modify the input value of the function

3. Independent of the external environment without any side effects

The Job of the Reducer is to receive the current state and an action and return the new state. It looks something like this:

const initState = { count : 0 } 
function reducer(state = initialState, action) { .... return state; } 
Copy the code

store.subscribe() 

Accept a function that calls back when state changes;

 react-redux 

React-redux was created to make it easy for people to use redux in React.

The concept of UI component and container component is proposed:

The Ui component has no state and is only responsible for rendering. All the data comes from the PROPS container component.

Container components: responsible for managing state and passing state to UI components;

Newly provided APIS

Connect: Container component = connect()(UI component)

But there are two problems:

2. How to transmit the action triggered by the UI component to the state component;

Solution:

Container component = connect(stateToProps, dispatchToState)(UI component)

StateToProps:

MapStateToProps is a function. Its job, as its name suggests, is to establish a mapping between the (external) state object and the (UI component’s) props object.

It is written as follows:

Const mapStateToProps = (state, ownprops) => {return {todos: getVisibleTodos(state.todos, state.visiBilityFilter)}}Copy the code

DispatchToState:

The second parameter to the mapDispatchToProps Connect function, which maps UI component parameters to the Store. dispatch method. That is, it defines which user actions should be passed to the Store as actions.

It can be a function or an object.

 mapDispatchToProps: (dispatch,ownprops) => { 
        return { 
            onClick: 
                dispatch({ type: 'ON_CLICK', data: ownProps.filter })
          } 
     }
Copy the code

If mapDispatchToProps were an object, and each of its key names was a parameter of the same name as the corresponding UI component, the returned Action would be automatically emitted by Redux:

const mapDispatchToProps = { 
    onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter: filter };
}
Copy the code

Components:

After the component connect method generates the container component, the container component needs to get the state object to generate the UI component’s parameters. One solution is to pass a state object as a parameter to the container component. However, this can be cumbersome, especially if container components are at very deep levels, and passing state down from one level to the next is cumbersome. React-redux provides a Provider component that lets container components get state.

<Provider store={store}> <App /> </Provider> 
Copy the code

mirror

Mirror is a react, Redux, and React-Router package.

Make development easier and more convenient;

Initialization:

Mirror.defaults define configuration -> various modules defined mirror. model organization reducers, actions -> mirror. render generate store, wrap Provider, render DOM call actions:

Execute an action:

Dispatch (store.dispatch({})) -> The reducer execution in the corresponding store is equivalent to the user-defined reducer execution

Call the effects:

After also executing an action -> but without the action -> middleware interception in reducers, find the function in Effects and execute it