Eine kurze Erklärung der Redux-Middleware

Redux-Middleware

Die Rolle der Middleware besteht darin , verschiedene Verarbeitungen zwischen Quelldaten und Zieldaten durchzuführen , was sich positiv auf die Skalierbarkeit des Programms auswirkt. Normalerweise ist eine Middleware eine Funktion, und es ist am besten, wenn eine Middleware nur eine Aufgabe erfüllt.

Datenquelle-------->Middleware-------->Middleware-------->Middleware-------->Zieldaten

applyMiddleware

applymiddleware kapselt eine Reihe von Funktionen in einer Funktion und die Ausführungsreihenfolge dieser Funktionen wird als nächstes übergeben

Currying : Multiparameterfunktion -> Einzelparameterfunktion

applyMiddleware(xxxx, xxxx)

Mit der Hand reißen

Erstellen Sie eine neue Middleware-Datei im Store-Verzeichnis und erstellen Sie die Datei thunk.js

export defualt ({dispatch}) => next => action => {
	if (typeof action === 'function') return action(dispatch)
	return next(action)
}

1. Die aktuelle Middleware Western Digital kümmert sich nicht darum, welche Art von asynchronem Vorgang Sie ausführen möchten. Sie kümmert sich nur darum, ob Sie einen asynchronen Vorgang ausführen.

2. Wenn Sie einen asynchronen Vorgang ausführen, übergeben Sie beim Auslösen der Aktion eine Funktion an mich. Wenn Sie einen synchronen Vorgang ausführen, fahren Sie mit der Ausführung fort.

3. Asynchroner Operationscode sollte in die von Ihnen übergebene Funktion geschrieben werden

4. Die aktuelle Middleware-Funktion muss die Dispatch-Methode übergeben, wenn sie das von Ihnen übergebene Western Digital aufruft.

Im Laden eingeführt

index.js

import { legacy_createStore as createStore, applyMiddleware } from "redux";
import reducer from "./reducers/root.reducer";
import thunk from "./middleware/thunk";

const store = createStore(reducer, applyMiddleware(thunk))

export default store

verwenden

modal.actions.js

import { CHANGEMODALSHOW } from '../const/modal.const'

export const changeModalShow = value => ({type: CHANGEMODALSHOW, value})

export const changeModalShow_async = value => dispatch => {
  setTimeout(()=> {
    dispatch(changeModalShow(value))
  }, 2000)
}

Modal.js

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as modalActions from '../store/actions/modal.actions'

const Modal = ({isShowModal, changeModalShow, changeModalShow_async}) => {

  const styles = {
    width: '400px',
    height: '400px',
    left: '50%',
    top: '50%',
    position: 'absolute',
    transform: 'translate(-50%, -50%)',
    background: 'aliceblue',
    display: isShowModal ? 'block' : 'none'
  }

  const handelShowModal = () => {
    changeModalShow_async(true)
  }

  const handelHiddenModal = () => {
    changeModalShow(false)
  }

  return (
    <div>
      <button onClick={handelShowModal}>显示</button>
      <button onClick={handelHiddenModal}>隐藏</button>
      <div style={styles}></div>
    </div>
  )
} 

const mapStateToProps = state => ({
  isShowModal: state.modal.isShowModal
})

const mapDispatchToProps = dispatch => bindActionCreators(modalActions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Modal)

redux-thunk

Thunk- Middleware für Redux . Es ermöglicht das Schreiben von Funktionen mit integrierter Logik, die mit Redux-Speichern dispatchund -Methoden getStateinteragieren können

Installieren

npm install redux-thunk

Im Laden eingeführt

import { legacy_createStore as createStore, applyMiddleware } from "redux";
import reducer from "./reducers/root.reducer";
import thunk from "redux-thunk";

const store = createStore(reducer, applyMiddleware(thunk))

export default store

Der Effekt ist der gleiche wie beim handschriftlichen Thunk-Effekt