Redux的中间件是什么？有哪些？如何使用？

react组件上，store.getState() --->Middleware---> dispatch --> reducer中 -> action修改state数据，---> 更新页面的渲染

这样的话我们可以让dispatch提交数据的时候做不同的事情

若传递的action是一个对象，那dispatch直接传给store
若传递的action是一个函数，那dispatch通过middleware中间件（redux-thunk）直接自动执行函数，再通过函数中的具体情况看是否直接传递给store

自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。

具体可以参考这个连接地址：

redux中间件详解_爱吃囍囍丸子的博客-CSDN博客_redux中间件

常见的中间件

redux-thunk , redux-logger中间件

需要下载对应的包直接npm i 包名即可

store里的代码

import { applyMiddleware, createStore } from "redux"; 
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger'
// import promise from 'redux-promise'
function store(state:any,actions:any){

    if (!state){
        return {

            arr:0,
            li:[]
        }
    };
    switch(actions.type){

        case 'ADD':
            
            console.log(state.arr)
            // console.log(state);
            
            // state.li.push(1)
            state.arr+=1
            return {
                ...state
            }
            break
        case 'middleware':
            
            return{
                ...state
            }
        default:
            return state
            break
    }


}

const logger=new createLogger();


const stores= createStore(store,

    applyMiddleware(thunk,logger)    

);

export default stores

index.tsx代码

import styles from './index.less';
import store from '../store'
import { useEffect, useState } from 'react';
//import One from './gaojie';

export default function IndexPage() {

  const [num,setnum]=useState(store.getState().arr)


  const middleBtn=(n:number)=>{
      store.dispatch(
        ()=>{
          if (n==1){
              store.dispatch({type:'ADD'})

          }else{
              console.log('不行了');
          }
        }
      );  
  }
  
  return (
    <div>

         <button onClick={middleBtn.bind(this,1)}>

            中间件
         </button>
         <button onClick={middleBtn.bind(this,2)}>

            中间件2
         </button>

    </div>
  );
}

redux-promise

redux-saga

Redux的中间件是什么？有哪些？如何使用？

猜你喜欢