redux中间件的使用

今天来说下redux的俩个中间价 applyMiddleware和 redux-thunk的使用
看了官方的介绍 一脸懵逼进去 又一脸懵逼出来 总结三个字 就是中间件
中间价 类似 a,b =>c 的渲染过程中 我们在中间设置逻辑处理 和vue中的路由守卫有点像
1.

// 引入使用 它是 redux自带的
import {createStore,applyMiddleware} from "redux"
let store=createStore(reducer,applyMiddleware(middle));
function middle(getState){  // 这个函数是自定义的
	return function (dispatch){
       return function (action){
           // 这里可以做一些逻辑上的处理
           if(action.type==='add'){
                dispatch(action); // 这个然后再执行 dispatch
           }else{
               alert('你的行为不合法!');
           }
       }
    }
}
//页面在处理数据的时候
store.dispatch({type:'add'}) //如果不是 add那么 就不会执行dispatch操作 同时会弹出不合法的操作

2.第二个就是 redux-thunk 可以加强我们的 dispatch 执行函数 变成异步执行
大家都知道 同步执行 容易导致程序卡死 之前我们的 dispatch 确实是 同步执行的
引入使用 redux-thunk

import thunk  from "redux-thunk"   
let store=createStore(reducer,applyMiddleware(thunk,middle));// 放入到applyMiddleware函数的作为参数传入进去
// 我们再使用dispatch的时候就会发生变化了
store.dispatch(function(dispatch){
     dispatch({type:'add'})
 })

当然 小项目 使用 redux-thunk 显然比较费劲 看你项目需要使用 redux-thunk
生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油 奥利给！