最近在给自己的脚手架项目转到TypeScript时,遇到了一些麻烦。
项目之前采用的是react + react-redux + redux-thunk + redux-actions +redux-promise的体系。
当项目转TypeScript时,react和react-redux这种完美转换。
redux-actions转换也初步完成,但是各种为了适应TypeScript的声明很奇怪, 并且有些类型推断错误。
百度了一下,用typesafe-actions去替换,然后与redux-thunk 和redux-promise结合后,各种TypeScript类型错误。
这些类型推断稀奇古怪,网上也没有这个技术体系的相关文章,下班后调试代码,内心逐渐崩溃。
于是有了接下来的举措,用dva去替换react-redux + redux-thunk + redux-actions +redux-promise的数据流方案。
关于dva
关于dva的介绍咱们就不说了,这里给个链接:dva指南。
明白它是基于 redux + react-router + redux-saga 的封装就够了。
我之前的脚手架是将action,reducer+initialState 分成了不同的文件来处理。
而dva将 reducer, initialState, action, saga 这些数据流相关的都放在model中一起处理。
安装dva
网上很多都是安装dva-cli,然后再用 dva-quickstart。
然而我们是旧项目,只想用dva的数据流方案,所以不可能这么做,只需要安装dva就好了:
npm i --save dva
博客发布时dva最新稳定版是:2.4.1。
先看一下改造前的代码
在改造之前我们看一下原有入口js的代码:
import React, { Suspense } from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import promiseMiddleware from 'redux-promise';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import reducer from 'store/reducers';
import './app.less';
import Frame from 'modules/layout/Frame'
function Loading() {
return <div>Loading...</div>;
}
const PageMain = React.lazy(() => import('modules/pageMain'));
const store = createStore(reducer, applyMiddleware(thunk, creat
使用dva改造React旧项目的数据流方案
最新推荐文章于 2022-02-25 23:09:24 发布