redux中间件的简单讲解-Toy模板网

这篇具有很好参考价值的文章主要介绍了redux中间件的简单讲解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

redux中间件

中间件的作用： 就是在 源数据 到 目标数据 中间做各种处理，有利于程序的可拓展性，通常情况下，一个中间件就是一个函数，且一个中间件最好只做一件事情

数据源 --------> 中间件 --------> 中间件 --------> 中间件 --------> 目标数据

applyMiddleware

applymiddleware将一堆函数封装成一个函数，这些函数的执行顺序由next传递

柯里化：多参函数->单参函数

applyMiddleware(xxxx, xxxx)

手撕thunk

在store 目录下新建 middleware 文件，并创建文件 thunk.js

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

当前这个中间件西数不关心你想执行什么样的异步操作只关心你执行的是不是异步操作
如果你执行的是异步操作你在触发action的时候给我传递一个函数如果执行的是同步操作就往下执行
异步操作代码要写在你传递进来的函数中
当前这个中间件函数在调用你传递进来的西数时要将dispatch方法传递过去

在 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

使用

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

Redux 的Thunk中间件。它允许编写内部带有逻辑的函数，可以与 Redux 存储dispatch和getState方法进行交互

安装

npm install redux-thunk

在 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

效果是跟自己手写thunk效果一样的文章来源地址https://www.toymoban.com/news/detail-733211.html

到了这里，关于redux中间件的简单讲解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！