React Learn day 7

This is the 23rd day of my participation in the Genwen Challenge in August

redux

Redux implements a single data flow in strict accordance with a set of frameworks implemented by Flux ideas.

Part of the

Redux consists of four parts

A message published by the Action component

Store Stores messages

Reducers capture actions, methods for processing data

View component view

The communication process

A component publishes actions

Actions are captured by reducers through the Store

Reducers process data based on the type of message

Reducers stores the new data in the Store

The store passes the updated data to another component

Note: During communication, data is stored as state.

Redux’s Three principles

Single data source

There can only be one store object in the entire application.

State is read-only

The data state in the entire application is read-only and cannot be modified. We can obtain state through the getState method, but we cannot directly modify state either in the component or in the Reducer. In the component, we need to publish actions to modify state.

Functional programming

In order to make our development easier, Redux suggested that we adopt functional programming, that is to say, each reducer is a function, in which we update state data

Experience the story

Redux was designed not just for React, but for use in various frameworks, so the core module was abstracted to be common. To use it in other frameworks, we had to install plugins.

Redux will be used in ES6 development, so we will install the module

npm install redux

The Redux module provides some methods that we can use

Redux method

CreateStore is used to create a store

The parameter is the reducers method

The return value is a Store object

Function: Stores state data for an application

CombineReducers combines multiple reducers

For example, when using routes, you can combine the reducers of routes in this method

ApplyMiddleware adds middleware

For example, in asynchronous Action, add middleware.

action

Action is a message object that defines the message type and message data

Message types are usually denoted by type (types are usually immutable, so they are defined as constants at work)

Data part attribute names are unlimited and can be arbitrary, such as data and so on

reducers

Mutations are used to receive and process actions, similar to the on method in observer mode, or mutations in VUex.

In Redux, is designed as a function

The first parameter represents the state object

The second parameter represents the action object

There must be a return value, which is the updated state data

Note: If state is referenced data, be sure to copy it before returning it.

That is to return a new state object.

When we create a store, a reducer is done by default so that state has a default value, so we can define a default value for state and return it

Store object

Dispatch Used to publish messages (equivalent to the trigger method in observer mode)

GetState Gets state data

Alternative replaceReducer reducer

Subscribe Listens for state changes

Symbol symbol object

For example:

/ / into the story
import { createStore } from 'redux';
// console.log(Redux);
// Message names are defined as constants
const ADD = 'add';
const REMOVE = 'remove';
// Define the message
let addNum = { type: ADD, num: 10 }
let removeNum = { type: REMOVE, num: 5 }
/ / define reduer
function reducer(state = 0, action) {
     // console.log('reducer', state, action);
     // Parse the aciton type
     switch (action.type) {
          case ADD:
          // Value type data, which can be modified directly
          state += action.num;
          break;
          case REMOVE:
          // Process messages that reduce numbers
          state -= action.num;
          break;
     }
     // There must be a return value, which is the new state
     return state;
}
// Create a store and pass reducer
let store = createStore(reducer);
/ / to check the store
console.log(store)
// Listen for state changes before execution
store.subscribe(res= > console.log(store.getState())) 
// The method of deconstructing
let { dispatch } = store;
/ / release the action
// store.dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(removeNum)
Copy the code