React中MiddleWare（中间件）的使用

本文主要是介绍React中MiddleWare（中间件）的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

import {createStore,applyMiddleware} from “redux”;
// 1. 导入中间件
import reducer from “./reducer/index.js”;
import logger from “redux-logger”;// 能够在控制台直观的看到更改状态的type类型以及更改状态前后的值;
import reduxThunk from “redux-thunk”;// 能够让redux中的action支持异步；
import reduxPromise from “redux-promise”;//支持promise
// 2. 使用中间件
let store = createStore(reducer,applyMiddleware(logger,reduxThunk,reduxPromise));

export default {add(n){// 为了在action中发送请求；// 在action中不支持异步的派发动作；// 在真实的工作中，异步的请求数据，把请求回来的数据放到store中的state中，在redux想更改数据只能dispatch；// let t;// setTimeout(()=>{//     t={type:types.ADD_NUM}// },2000)// return t;// 有了redux-thunk,action方法可以返回一个函数，并且这个函数执行时，传递两个实参return function(dispatch,getState){// dispatch==>store.dispatch  getState==>store.getState// 在项目中，在action中发送异步的请求，等请求回来以后再去修改store中的state值；setTimeout(()=>{dispatch({type:types.ADD_NUM,n:n})},2000)}},min(m){// payload可以是一个promise的实例；// payload :代表的是promise中resolve的结果；// resolve是多少，那么payload的值就是多少// return {//     type:types.MIN_NUM,//     payload:new Promise(function(resolve,reject){//         // 这里支持异步的请求；//         // 如果payload返回一个promise实例，那么会默认pengding状态到成功态；//         // 如果该promise实例没有then，那么会将resolve或reject的实参传递过去//         // 如果promise的实例调用了then方法，那么根据then方法中返回的数据作为payload的值；//         setTimeout(()=>{//            reject(100)//         },2000)//     }).then(function(val){//         // 这个函数是执行的，但是该函数没有返回值；默认返回undefined；//         // 把这个函数的执行结果赋值给了当前对象的payload属性//         //console.log(val);//         //return val+1;//     },function (val){//         console.log(val);//         return val;//     })// }// redux-promise 两种写法；return new Promise(function(resolve,reject){setTimeout(()=>{// resolve的对象就是dispatch传递的action；resolve({type:types.MIN_NUM,m})},2000)})}
}
//reducer中的代码
import {combineReducers} from "redux";
import * as types from "../action-types.js";
let initState = {num:0};
function counter(state=initState,action){switch(action.type){case types.ADD_NUM:return {...state,num:state.num+action.n};case types.MIN_NUM:return {...state,num:state.num-action.m}}return state;
}
let reducer = combineReducers({counter
});
export default reducer;

这篇关于React中MiddleWare（中间件）的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---