React|Redux中间件及其开发者工具 React|react.js|javascript|前端|V17.

本文目录

一、redux中间件(redux-thunk)
二、redux中间件(redux-promise)
三、Redux开发者工具

一、redux中间件(redux-thunk)

redux里，action仅仅是携带了数据的普通js对象。action creator返回的值是这个action类型的对象。然后通过store.dispatch进行分发，同步的情况下一切都很完美，但是reducer无法处理异步的情况。
那么我们就需要在action和reducer中间架起一座桥梁来处理异步。这就是middleware

安装命令: npm i redux-thunk

文章图片

在你创建的store.js中去引入使用：

import { applyMiddleware, combineReducers, createStore } from "redux"; import TabbarReducer from "./reducers/TabbarReducer"; import reduxThunk from "redux-thunk"const reducer = combineReducers({ TabbarReducer })const store = createStore(reducer, applyMiddleware(reduxThunk)); export default store;

文章图片

异步的话那么这个中间件将起作用，如果是同步的话还是走同步。
那么你在actionCreator中如果写成异步的话必须写成返回一个函数，并且这个函数带有一个参数dispatch，在你异步获取到数据是进行dispatch，并用payload将你需要传到参数传过去即可。如下示例：

function getCinemaListAction() { return (dispatch) => { axios({ url: '...', method: 'get/post', headers: {} }).then((res) => { dispatch({ type: 'cinemalist', payload: res.data }) }) } }

文章图片

reducer中去判断取值：

文章图片

然后去需要的页面去订阅取值：

文章图片

订阅问题，在redux中每次发布的时候，会把所有订阅的东西拿出来执行，这样的话完全没必要，我们可以在当前组件销毁的时候取消订阅，如下写法：

文章图片

二、redux中间件(redux-promise) 安装命令: npm i redux-promise

文章图片

在store.js中引入：

文章图片
react-thunk和react-promise写法上不同，功能上一样：
react-promise返回一个promise：

文章图片

三、Redux开发者工具

Redux DevTools Extension

文章图片

文章图片

在store.js中配置：

import { applyMiddleware, combineReducers, createStore, compose } from "redux"; import TabbarReducer from "./reducers/TabbarReducer"; import reduxThunk from "redux-thunk" import reduxPromise from "redux-promise"const reducer = combineReducers({ TabbarReducer })const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(reducer, /* preloadedState, */ composeEnhancers( applyMiddleware(reduxThunk, reduxPromise) )); export default store;

【React|Redux中间件及其开发者工具】这样配置完之后，在调试器哪里就有状态了：