猪八戒网站建设报价,服务器是干什么用的,如何管理网站域名,网站建设要域名和什么redux中间件
中间件的作用#xff1a; 就是在 源数据 到 目标数据 中间做各种处理#xff0c;有利于程序的可拓展性#xff0c;通常情况下#xff0c;一个中间件就是一个函数#xff0c;且一个中间件最好只做一件事情
数据源 -------- 中间件 -------- 中间件 -…redux中间件
中间件的作用 就是在 源数据 到 目标数据 中间做各种处理有利于程序的可拓展性通常情况下一个中间件就是一个函数且一个中间件最好只做一件事情
数据源 -------- 中间件 -------- 中间件 -------- 中间件 -------- 目标数据
applyMiddleware
applymiddleware将一堆函数封装成一个函数这些函数的执行顺序由next传递
柯里化多参函数-单参函数
applyMiddleware(xxxx, xxxx)手撕thunk
在store 目录下新建 middleware 文件并创建文件 thunk.js
export defualt ({dispatch}) next action {if (typeof action function) return action(dispatch)return next(action)
}当前这个中间件西数不关心你想执行什么样的异步操作 只关心你执行的是不是异步操作 如果你执行的是异步操作 你在触发action的时候 给我传递一个函数 如果执行的是同步操作 就往下执行 异步操作代码要写在你传递进来的函数中 当前这个中间件函数在调用你传递进来的西数时 要将dispatch方法传递过去
在 store 中引入
index.js
import { legacy_createStore as createStore, applyMiddleware } from redux;
import reducer from ./reducers/root.reducer;
import thunk from ./middleware/thunk;const store createStore(reducer, applyMiddleware(thunk))export default store使用
modal.actions.js
import { CHANGEMODALSHOW } from ../const/modal.constexport const changeModalShow value ({type: CHANGEMODALSHOW, value})export const changeModalShow_async value dispatch {setTimeout(() {dispatch(changeModalShow(value))}, 2000)
}Modal.js
import React from react
import { bindActionCreators } from redux
import { connect } from react-redux
import * as modalActions from ../store/actions/modal.actionsconst Modal ({isShowModal, changeModalShow, changeModalShow_async}) {const styles {width: 400px,height: 400px,left: 50%,top: 50%,position: absolute,transform: translate(-50%, -50%),background: aliceblue,display: isShowModal ? block : none}const handelShowModal () {changeModalShow_async(true)}const handelHiddenModal () {changeModalShow(false)}return (divbutton onClick{handelShowModal}显示/buttonbutton onClick{handelHiddenModal}隐藏/buttondiv style{styles}/div/div)
} const mapStateToProps state ({isShowModal: state.modal.isShowModal
})const mapDispatchToProps dispatch bindActionCreators(modalActions, dispatch)export default connect(mapStateToProps, mapDispatchToProps)(Modal)redux-thunk
Redux 的Thunk中间件。它允许编写内部带有逻辑的函数可以与 Redux 存储dispatch和getState方法进行交互
安装
npm install redux-thunk在 store 中引入
import { legacy_createStore as createStore, applyMiddleware } from redux;
import reducer from ./reducers/root.reducer;
import thunk from redux-thunk;const store createStore(reducer, applyMiddleware(thunk))export default store效果是跟自己手写thunk效果一样的
