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;
这样配置完之后,在调试器哪里就有状态了:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiaegag
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22