What is a Redux?

Redux is a JavaScript state container for global state management.

Redxu flow chart (core of core)

The three cores of Redux

Core 1: Single data source

A single data source means that the state of the entire application is stored in an object tree, and the ibject tree exists in only one store.

Core 2: State is read-only

The only way to change state is to trigger an Action, which is a generic object describing events that have occurred. This ensures that neither views nor network requests can directly modify state, but instead they can only express the intent to change it, because all changes are centralized and executed in strict sequence.

Core 3: Use pure functions to perform modifications

To describe how actions change state, we need to write reducers, which are pure functions that accept the previous state and action and return the new state. You can reuse, you can control the order, you can pass in additional parameters.

The composition of the story

State of the state

State is the data we pass around. When we use React to develop projects, we can roughly divide state into three categories.

  • DominDate: Data sent from the server, such as information retrieved from the user.
  • UI State: Data that determines the current UI display State, such as the display and hiding of pop-ups.
  • App State: Indicates the app-level State, for example, whether loading is required.

The Action event

Actions are the vehicle for transferring data from the app to the Store. They are the only source of data for the Store. In general, we can pass actions to the store via store.dispatch()

  • Action is essentially a JS object.
  • The Action object must have a type attribute inside to indicate the Action to be performed.
  • In most cases, the type above is a string constant.
  • With the exception of the Type field, the structure of the action is arbitrarily defined.
  • It is generally preferred to use action to create functions (see the example below for details).
  • Action only describes the state to change, but does not describe how the state changes.

The action instance

Action function instance

Reducer

The Reducer is essentially a pure function that responds to incoming actions and then processes the state to the Store. The Reducer function requires a return value so that the Store can receive data. The Reducer receives two parameters, one is the initialized state and the second is the sent action.

Reducer function instance

Store

A store is the object that links actions and reducers together.

The main duties and responsibilities

  1. The connection is established between the store and the reducer by createStore(Reducer).
  2. The connection between the store and the action is established through the store.dispatch(action object).
  3. A store is associated with a component by passing the store props through an entry file.
  4. Is the state of component to get through this. Props. Store the getState ().
  5. States are rendered to the page by store.subscribe().