2018-11-26 10:08:49 xuesheng1610748 阅读数 543

react+dva如何设置首次启动端口


说明:react+dva的项目,首次启动项目时npm start,如何设置端口号?

方法:打开react项目的 package.json文件,将 scripts中的start键值对 “start”: “roadhog server”,修改为 “start”: “set PORT=3000&&roadhog server” 即可更换端口号了。

package.json文件:

 "start": "roadhog server",

 //修改为下面的设置,即可更换端口号
 "start": "set PORT=3000&&roadhog server",
2019-12-05 16:25:55 qq_35986709 阅读数 7

dva是一个在redux和redux-saga的基础上封装的一个轻型框架,能辅助更好的组织代码进行开发。同时提供了react-router和fetch,基本上具备了开发web前端应用所需的主要工具,省下开发者自己进行配置安装的工作。

开始使用dva

首先使用dva-cli快速创建dva应用。

npm install dva-cli -g

使用dva快速创建新的项目框架。

dva new my-new-project

dva会默认使用tnpm, cnpm依赖安装,由于我现在的tnpm不能使用,只能把tnpm删掉。

问题:如何配置dva的默认npm源

项目结构

dva-cli会创建如下的初始化项目结构

.
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .roadhogrc.mock.js
├── .webpackrc    // webpack 配置
├── mock
│   └── .gitkeep
├── package.json
├── public
│   └── index.html
└── src
    ├── assets
    │   └── yay.jpg
    ├── components
    │   └── Example.js
    ├── index.css
    ├── index.js
    ├── models
    │   └── example.js    // 数据(状态)管理中心
    ├── router.js    // 路由
    ├── routes
    │   ├── IndexPage.css
    │   └── IndexPage.js    // 路由中对应的页面入口
    ├── services
    │   └── example.js
    └── utils
        └── request.js

接下来根据我的个人喜好对项目进行微调 * 加入pages目录,区别于components,前者用于放置页面的个性化组件,后者用于放置复用性强的公共组件。然而这种组织一定程度上使得routes的存在没有太大的意义。

在dva中使用redux
如果决定使用redux的话,需要在src/index.js里加入要用的model

// 3. Model
app.model(require('./models/example1').default);
app.model(require('./models/example2').default);

在dva中使用redux-router
在router.js中将页面入口组件引入并配置相关的路由

import IndexPage from './routes/IndexPage';
import ManagerPage from './routes/ManagerPage';
import EntryPage from './routes/EntryPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
          <Route path="/user" exact component={IndexPage} />
          <Route path="/manager" exact component={ManagerPage} />
          <Route path="/entry" exact component={EntryPage} />
      </Switch>
    </Router>
  );
}

在model中使用redux-router

import { routerRedux } from 'dva/router';

put(routerRedux.push('/manager'))

routerRedux.push('/manager')

在组件中使用redux-router

import { routerRedux } from 'dva/router';

dispatch(routerRedux.push('/manager'))

接下来就可以愉快的开发了。

dva中的redux

首先,在使用dva开发时,可以将store拆分为多个model,每个model对应一个namespace,对于复杂的应用,这种组织方式更贴近逻辑,使得问题更为清晰。对比我之前在vue中将store拆为state, getters, mutations, actions要更科学一些。后者的查分方式可以成为“横向拆分”, 而前者的拆分方式则是一种“纵向拆分”。 这种纵向拆分使得每一个拆分出来的子集都是一个子服务的对应。该自己可以包含自己的state,reducers和effects,可以认为是一种前端微服务化的思想。

dva对store的构成与vuex相似,都将同步reducers和异步reducers拆分开来,以更好的管理监控异步操作。dva在异步处理上使用了redux-saga,借助Genarator来实现异步操作。

问题:为什么不使用async呢?是历史问题,还是二者在细节层面存在差别。
generator函数的使用

关于Generator Generator使用*标识函数为Generator函数 使用yield阻断异步操作,等到yield后的表达式完成计算得到返回值时,再继续执行下面的代码。 关于是否要对同步操作使用yield,我认为没有严格的限制。但如果其中存在你所关心的中间状态变量,可以加上yield。这样就可以在调用next()方法时在返回对象的value属性中查询到。

这点与async不同,async返回的是promise,而generator返回的则是状态对象
redux-saga中异步effects的函数有三个参数

*postFile({ payload }, {call, put}) {
      // handle both create and update
      let res = yield call(fetch, '//api.center/postFile', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      })
      let result = yield res.json()
      if (result.success) {
        yield put({ type: 'getFileList' })
      }
    },
{ payload } = action, 调用dispatch时所传递的参数
{call, put}call负责调用异步操作,put则调用其他reducers来完成对state的修改操作

这与vuex不同,vuex中的action可以直接修改state(也可以调用mutations),但直接修改会导致action的逻辑过于复杂,失去了分段调试监控的优势。

call(异步操作函数,参数1,参数2,…)return 异步函数的返回值(promise或值)
put({type, payload}) 与dispatch参数相同,但type中不需要定义命名空间
reducers的设计
在dva给出的实例代码中,有一个reducers的定义十分有趣

save(state, action) {
  return { ...state, ...action.payload };
}

这种实现是对所有reducers的本质抽象,即修改state。在实践简单应用的开发时,基本上所有的reducers都可以只用这一个save来实现。那是不是无需编写其他的reducers了呢? 我认为不是的,对于如下情况,仍需对每一种情况编写对应的reducers 修改的状态(state)过多,导致难以通过修改值直接判断reducer所代表的逻辑是什么(在哪里调用,为什么调用)。这种情况下建议新定义reducer,对一个state的操作集进行封装,以便在调试时清楚被调用的reducer对应的业务逻辑是什么。 需要根据参数进行预计算,最终得到state。这时,建议将一些重要的逻辑运算迁移到reducer中,以方便管理或复用。

开放的webpack配置

.webpackrc使得可以根据个人需求对react进行配置而无需进行eject操作。 (也可以将.webpackrc改为.webpackrc.json从而使用json格式的配置) 如,我们可以配置babel插件来直接引入如antd或next之类的框架

{
   "extraBabelPlugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

如果不想使用css modules功能 (比如next的import配置失败,只能手动导入css),还可以加入

“disableCSSModules”: true
不过,建议体验一下css modules的功能

import styles from './style.css';

Hello React!

参考资料 Dva官网:[https://dvajs.com/guide/](https://dvajs.com/guide/)

ES6 Generator:http://es6.ruanyifeng.com/#docs/generator

dva.js入门 https://www.jianshu.com/p/c7b3b9c98d04

antd配置:https://ant.design/docs/react/introduce-cn react eject:https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject

redux saga:https://redux-saga-in-chinese.js.org/

2018-09-17 10:22:52 qq_38187583 阅读数 303

前言

技术资料

react + dva + redux + react-router + redux-sage + antd + antd动画

总的来说dva是一个很简单的项目 一步步跟大家来说一下把

效果图

 

初始化环境配置

因为项目中使用了antd的关系 所以 这边需要做一下设置 才可以正常使用

文件名称是:.roadhogrc

目录结构

 

初始化dva

初始化部分 非常简单 首先一个个来说明一下

1.const app = dva()

这部分是用来做dva初始化的部分 先给大家看一下完整的接口

在这里 你可以设置全局state 全部error 还有包括router的事件 state的事件 等等 

都可以直接统一的在这边进行设置与管理

还有history这个参数是从react-router中来的

相关地址:react-router dva初始化

2.app.use

这个是用来加载插件的 因为我这个项目没用到什么其他的redux第三方中间件 所以这边直接忽略

 

3.app.model

这个是用来接收你发送的action的

model类似于mvc结构中控制器的角色,其中主要有五个配置项。

  1. namespace
    model 的命名空间,同时也是他在全局 state 上的属性,只能用字符 串,不支持通过 . 的方式创建多层命名空间。
  2. state
    state的初始值,优先级低于传给 dva() 的 opts.initialState。
  3. reducers key/value 格式定义 reducer,用于处理同步操作,唯一可以修改 state 的地方。由 action 触发
  4. effects
    以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不 直接修改 state。由 action 触发,可以触发 action,可以和服务 器交互,可以获取全局 state 的数据等等。
  5. subscrip
    以 key/value 格式定义 subscription。subscription 是订 阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、服 务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。

简单来说,就是在state中设置初始化的组件状态,在reduce中处理同步的action,在effect中处理异步的action,并发出同步的action去更新state。最后可以在subscrip中添加事件监听等操作

 

4.app.router

在这里面 进行你所有页面的初始化路由设置

这里有两种写法

写法1:

写法2:

下面这种是按需加载的 所有 性能会比上面的那种 要高很多 尤其是你的页面比较重的时候

ok初始化部分全部讲完了 现在来看看ui部分

UI代码

 

这个是我的一个完全简化版 不含里面的内容 因为UI部分 我想搞前端的人 应该都会 所以就来讲点跟dva有关系的

我想 如果没有接触过这种写法的人 肯定会感觉很纳闷吧 这是啥招 不知道在干吗啊 来看看 说明

首先说一下 这个写法的优点跟缺点

优点:

因为这样写的话 就是一个function 所以react在判断的时候 会直接省略生命周期的部分 从而 可以大大的加快加载速度

缺点:

缺点就是 你无法使用this,也没有办法使用生命周期 

所以 如果你的页面 必须要使用生命周期的话 还是用class吧 

connect

这个其实很好理解

如果说你的ui里面需要用到model里面的数据的话 那么就可以直接用这个 将model里面的元素 当做props的方式 传递进来

如果你只想接管一个app的model的话

connect(({app}) => ({app})

如果你想接管多个 直接在app后面添加即可

至于另外的form.create部分 因为这里使用到了一个antd的表单组件

所以需要用form.create的方式 将里面的内容以props的方式 传递进去

相关文章:antd表单组件

 

登录

因为我们是一个表单登录页面 所以 当我们点击登录的时候 需要发送一条dispatch给model那边 然后通过他来实现页面的跳转

先来看看如何发送数据

因为使用了antd的关系 所以表单部分 可以说是被无限的弱化了 你现在 不需要关心任何事情 他都会帮你搞定 具体相关的api 可以看上面发的那个链接

来看看消息发送的部分

这里其实 很简单 因为antd已经帮我们做了处理 我们可以在他们提供的表单组件中 进行相关的配置 而所有的数据 他都会通过这个来直接返回过来

所以我们只需要在这边进行一下判断即可 如果产生了错误就直接返回 

否则执行dispatch 发送一条action给对应的model那边 然后在那边做出相应的判断

model部分

 

首先 一般介绍的文章都会写的很详细 但是对于新手来说 有可能会无从下手 

所以 我们在接触到我们不熟悉的东西的时候 最好能用自己习惯的一种语言去解释他 这样也方便学习 按功能 我们依次下来

reducers 处理数据

effects   接收数据

subscriptions 监听数据

通过这样的解释是不是稍微能对其有个大概的了解 每个都是按照功能分类的 所以 尽量 不要在不归他管的地方 做其他的事情

还记得 我们刚才发送数据的那个命令吗 我们在来看一下

dispatch 是根据你里面设置的type内容 然后转发到指定的model的 所以你这边 要设置正确以后 在model那边才能接收到你发送的这条action

 

login就是我们处理接收消息的地方

在这里 又遇见了几个新的单词 put call

其实 不止这几个 

一般常用的有put call select take 

当然 在这个上面 还有一些基于这些函数 封装的高阶函数

相关文章:github.com/dvajs/dva/blob/master/test/effects-test.js

简单来说一下 这几个函数的大概内容

put  用来发起一条action

call 以异步的方式调用函数

select 从state中获取相关的数据

take 获取发送的数据

当我们使用put发送一条action的时候 与之对于的reducers就会接收到这个消息 然后在里面返回state等数据

这里有一点 reducers中尽量只做state的数据返回 而不要在这里写相关的逻辑

对于路由跳转的部分 我们使用这样来实现

当我们执行这个命令的时候 因为我们的router已经相互绑定起来了 所以他会自动调用router中的数据来进行展示

 

ok 总体就这么多吧 是不是感觉很简单

我自己个人觉得 毫无难点 入门简直 不要太方便

我相信 只要仔细看完我所有写的 dva的所有功能都将可以掌握

2019-12-18 11:28:16 baidu_41604826 阅读数 11

dva+react 设置启动端口

根据需要,一个电脑会同时运行多个项目,如果不设置默认端口的话,都是8000,那么如果有一个项目正在运行,重新启动一个的话,会提示是否需要重新开启一个,选择yes之后就没有下文了。所以需要给项目设置相应的默认端口

方法

找到package.json做如下操作即可:
在这里插入图片描述

2017-06-30 11:05:37 weixin_34332905 阅读数 36
再看本篇文章之前,本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目,因为现在dva和roadhog还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备,那么请继续往下走;

本文适合对 ES6+webpack 有一定了解的人。没有的了解的同学可以先看看下面的我分享的链接,

ES6: http://www.jianshu.com/p/ebfe...
Webpack: https://doc.webpack-china.org...
react: https://facebook.github.io/re...
antd-mobile:https://mobile.ant.design/doc...

扯完啦,接下来就是正题啦,先看效果
图片描述

今天主要是想给大家说一下怎么用dva来搭建react的项目

第一步

安装 dva 和 roadhog;
    npm i dva-cli roadhog -g 
好啦~现在你已经学会了怎么安装dva和roadhog啦,接下来就可以创建项目啦

第二步

创建项目
dva new projectName
npm install
npm start

打开浏览器输入localhost:8000,看到欢迎界面证明第二步已经成功啦

图片描述

第三步

添加配置文件和安装webpack

安装 lodash babel-plugin webpack-plugin shim 并添加到package.json文件中

npm install --save-dev webpack 安装本地webpack配置文件

webpack 文件
    // webpack配置
    import glob from 'glob';
    import webpack from 'webpack';
    import { isRegExp } from 'lodash';
    import pxtorem from 'postcss-pxtorem';
    import HtmlWebpackPlugin from 'html-webpack-plugin';
    import ExtractTextPlugin from 'extract-text-webpack-plugin';
    import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';
    
    
    const path = require('path');
    export default ( webpackConfig, env ) => {
    
      const loaders = webpackConfig.module.loaders;
      const postcss = webpackConfig.postcss;
      webpackConfig.postcss = function () {
        const postcssArray = postcss();
        postcssArray.push( pxtorem( {
          rootValue: 100,
          propWhiteList: []
        } ) );
        return postcssArray;
      };
      const svgDirs = [
        require.resolve( 'antd-mobile' ).replace( /warn\.js$/, '' ), // antd-mobile 内置svg    // 引入antd-mobile
        path.resolve(__dirname, 'src/assets/icon'),
      ];
    
      loaders.forEach( ( loader ) => {
        if ( loader.test && loader.test.toString() === '/\\.svg$/' ) {
          loader.exclude = svgDirs;
        }
      } );
    
      loaders.unshift( {
        test: /\.svg$/,
        loader: 'svg-sprite',
        include: svgDirs
      } );
      const noParse = webpackConfig.module.noParse;
      if ( Array.isArray( noParse ) ) {
        noParse.push( /moment.js/ );
      }
      else if ( noParse ) {
        webpackConfig.module.noParse = [ noParse, /moment.js/ ];
      }
      else {
        webpackConfig.module.noParse = [ /moment.js/ ];
      }
    
      // lodash
      webpackConfig.babel.plugins.push( 'lodash' );
      webpackConfig.plugins.push( new LodashModuleReplacementPlugin() );
    
      loaders.push( {
        test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
        loader: 'file'
      } );
    
      // 打包配置
      if ( env === 'production' ) {            
         //添加hash
        webpackConfig.output.filename = '[name].[chunkhash:6].js';
        webpackConfig.output.chunkFilename = '[name].[chunkhash:6].js';
    
        webpackConfig.plugins.forEach( ( plugin, index, plugins ) => {
          if ( plugin instanceof ExtractTextPlugin ) {
            plugins[ index ] = new ExtractTextPlugin( '[name].[chunkhash:6].css', {
              disable: false,
              allChunks: true
            } );
          }
          else if ( plugin instanceof webpack.optimize.CommonsChunkPlugin ) {
            plugins[ index ] = new webpack.optimize.CommonsChunkPlugin(
                'common',
                'common.[chunkhash:6].js'
            );
          }
        } );
    
      }
      //HTML
      webpackConfig.module.loaders = loaders.filter(
              loader => isRegExp( loader.test ) && loader.test.toString() !== '/\\.html$/'
      );
      webpackConfig.plugins.push(
          new HtmlWebpackPlugin( {
            // favicon: './src/logo/logo.ico',
            template: './src/index.html',
            filename: 'index.html',
            inject: true
          } )
      );
    
      return webpackConfig;
    };

到现在你已经完成了一半啦 是不是觉得很简单。对啦 这里有一点要注意,复制 es5-shim.min.js es5-sham.min.js console-polyfill/index.js 文件到 public 文件夹console-polyfill/index.js 改名为 console-polyfill.js

第四步 roadhog、proxy配置和antd-mobile引入

废话不说 这步直接上代码(对应的是目录中的.roadhogrc.js,大学按步骤下来的话这应该是.roadhogrc.json的文件,但是本人还是比较喜欢js语法,所以做了修改,此处因人而异)
     import path from 'path';
    
    export default {
     '/api': {
        target:'localhost',//这里是你的接口地址,我随便写的
        changeOrigin: true
      },
      multipage: true,
      theme: 'antd.config.js',
      entry: [ 'src/common.js', 'src/index.js' ],
      env: { //下面是在开发环境和生产环境都引入antd-mobile
        development: {
          extraBabelPlugins: [
            'dva-hmr',
            'transform-runtime',
            [ 'import', { libraryName: 'antd-mobile', style: true }]
          ]
        },
        production: {
          extraBabelPlugins: [
            'transform-runtime',
            [ 'import', { libraryName: 'antd-mobile', style: true }]
          ]
        }
      }
    };
    

好啦,以上四步差不多就可以用dva把react的项目架子搭建起来,再有就是eslint的配置啦,此处不做讲解(http://eslint.org/docs/user-g...),接下来你可以在src中尝试着运行一下Hello World啦

还有一个点需要注意的是,dva 建项目的时候会默认安装redux和react-router,所以在开发中千万不要在去安装,会因为版本不兼容而导致项目无法运行;

最后给大家分享一些用到的资料
antd主题制定: https://ant.design/docs/react...
roadhog: https://github.com/sorrycc/ro...
webpack中proxy配置: https://webpack.github.io/doc...
redux: http://www.redux.org.cn/
react-router: http://react-guide.github.io/...

项目地址:https://github.com/tengwei30/...

更多精彩敬请期待。。。

react Dva引入scss

阅读数 5084

Dva基础学习

阅读数 1081

没有更多推荐了,返回首页