React study day 7

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details ： Gengwen challenge

redux

redux Strictly in accordance with flux A framework for the realization of ideas , Realize a single data flow .

Part of the

redux It consists of four parts

action Message published by component

store Storage of messages

reducers Capture action, The way data is processed

view Component view

Communication process

A component release action

action adopt store By reducers Capture

reducers Process data according to the type of message

reducers Store new data in store in

store Pass the updated data to Another component 了

Be careful ： In the course of communication , The data is used as state To store .

redux The three principles

Single data source

There can only be one... In the whole application store object .

state Is read-only

Data in the whole application state Is read-only , We can't modify . We can go through getState Method to get state, But whether in components , Still reducer in , We can't directly modify state, In components , We're going to release action To modify the state.

Functional programming

redux To make our development easier , It is suggested that we adopt functional programming , That is to say, every one reducer It's all a function , In the function , We update state data

Experience redux

redux At the beginning of the design , Not just for react It's time to design , Hope to be able to use... In various frameworks , Therefore, the core module is abstracted to be common , To use... In other frameworks , We need to install the corresponding plug-ins .

redux To be in es6 Used in development , So we need to install the module

npm install redux

redux The module provides some methods , For our use

redux Method

createStore Used to create store Of

Parameter is reducers Method

The return value is store object

effect ： Store the name of the application state data

combineReducers Merge multiple reducers

for example ： When using routing , By this method , Merge routed reducers

applyMiddleware Add Middleware

for example ： In asynchrony action in , Add Middleware .

action

action Is a message object , Used to define the message type , And message data

Usually use type Indicates the message type （ The type is usually invariant , So it should be defined as a constant ）

There is no limit on the data part attribute name , It can be arbitrary , for example data wait

reducers

For reception action And deal with , Similar to... In observer mode on Method , perhaps vuex Medium mutations.

stay redux in , Designed as a function

First parameter representation state object

The second parameter represents action object

Must have return value , It's updated state data

Be careful ： If state Is data of reference type , Be sure to copy before returning .

That is to return a new state object .

When we are creating store When , In order to make state Have default values , It will be executed once by default reducer, So we can do it for state Define the default value and return

store object

dispatch Used to publish news （ Equivalent to... In observer mode trigger Method ）

getState obtain state data

replaceReducer replace reducer

subscribe monitor state Changing

symbol symbol object

give an example ：

//  introduce redux
import { createStore } from 'redux';
// console.log(Redux);
//  The message name is defined as a constant 
const ADD = 'add';
const REMOVE = 'remove';
//  Defining messages 
let addNum = { type: ADD, num: 10 }
let removeNum = { type: REMOVE, num: 5 }
//  Definition reduer
function reducer(state = 0, action) {
     // console.log('reducer', state, action);
     //  analysis aciton type 
     switch (action.type) {
          case ADD:
          //  Value type data , Can be modified directly 
          state += action.num;
          break;
          case REMOVE:
          //  Deal with messages that reduce numbers 
          state -= action.num;
          break;
     }
     //  Must have return value , It's new state
     return state;
}
//  establish store,  Pass on reducer
let store = createStore(reducer);
//  see store
console.log(store)
//  monitor state change ,  Be sure to listen before execution 
store.subscribe(res => console.log(store.getState())) 
//  destructor methods 
let { dispatch } = store;
//  Release action
// store.dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(addNum)
dispatch(removeNum)
 Copy code