A brief explanation of redux middleware

redux-middleware

The role of middleware is to perform various processing between source data and target data , which is beneficial to the scalability of the program. Usually, a middleware is a function, and it is best for a middleware to only do one thing.

Data source-------->Middleware-------->Middleware-------->Middleware-------->Target data

applyMiddleware

applymiddleware encapsulates a bunch of functions into one function, and the execution order of these functions is passed by next

Currying : multi-parameter function -> single-parameter function

applyMiddleware(xxxx, xxxx)

tear thunk

Create a new middleware file in the store directory and create the file thunk.js

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

1. The current middleware Western Digital does not care about what kind of asynchronous operation you want to perform. It only cares about whether you are performing an asynchronous operation.

2. If you are performing an asynchronous operation, you pass a function to me when triggering the action. If you are performing a synchronous operation, continue execution.

3. Asynchronous operation code should be written in the function you pass in

4. The current middleware function needs to pass the dispatch method when calling the Western Digital you passed in.

Introduced in the store

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

use

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 for Redux . It allows writing functions with logic inside that can interact with Redux stores dispatchand methodsgetState

Install

npm install redux-thunk

Introduced in the store

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

The effect is the same as handwriting thunk by yourself