React dva 的使用
各大传送门:
了解 dva
- dva = React-Router + Redux + Redux-saga + fetch
- dva的初衷是(其实应该是redux的初衷)。提供一个公共的顶层的状态管理工具,专门为view层服务(实现双向数据流),而让react只专注专心负责渲染view层。
dva项目入口初始化
在初始化的时候,指定使用的路由模式,这里使用了hash模式。
import dva from 'dva'; import createHistory from 'history/createHashHistory'; // user BrowserHistory // import createHistory from 'history/createBrowserHistory'; // 1. Initialize const app = dva({ history: createHistory(), });
dva的几个规则:
1、通过dispatch调用namespace/effects
2、state(状态)
3、effects (异步操作)
- 函数必须带*,也就是生成器。
- 第一个参数,可以拓展为{payload, callback}
- 第二个参数,call和put
- call 就是调用 async的action函数
- put就是调用reducers的函数来更新state。
4、reducers
5、dva是以model为单位的,所有的应用逻辑都在上面
简而言之总结一下吧。开发dva分为两个阶段:
1、准备阶段:
- 定义 state 状态,用以绑定到 view 层;
- 定义 effects
- call用来调用 action,类似dispatch
- put用来调用reducers
- 定义 sync action 函数,用来进行异步请求;
- 定义 reducers 函数,用来更新 state。
2、调用阶段:
拿到dispatch
const { dispatch } = this.props dispatch({type: 'count/add'}) // this.props.dispatch({type: 'count/add'})
可以直接调用 effects, 也可以直接调用reducers。如果是同名的话,会一起调用。优先执行reducers。
【dispatch 方法从哪里来?被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。】
简单示例伪代码
/** * 一、index.js 调用示例 handleClick () { const { dispatch } = this.props dispatch({ type: 'todo/save' } } 二、async func 示例 export async function saveTodoToServer(codetype) { return request(/api/framework/sys/code/list?codetype= + codetype); } */ export default { namespace: 'todo', state: {}, // 也可以是数组: [] effects: { *save({ payload, callback }, { put, call }) { // 调用 async func saveTodoToServer yield call(saveTodoToServer, todo); // 调用 reducers 更新 state 可以自由传递任何参数,必须保留type yield put({ type: 'add', title: payload.title, text: payload: text, time: payload: time }); }, }, reducers: { // 比较推荐es6的这样写:add(state, { title, text, time }) add(state, action) { const title = action.title const text = action.text const todo = { title: action.title, text: action.text, time: action.time } // 保存数据到 state return {...state, todo}; }, }, }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!