曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧。

但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美模拟用户的页面加载,

貌似浏览器并没有提供进度API,只能以这样拙劣的方式进行模拟,有兴趣的朋友不妨与我交流。

代码附上:

LoadingBar.jsx

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux'; export class LoadingBar extends Component {
constructor(props) {
super(props); this.state = {
timer: null,
style: {
display: 'none',
position: 'absolute',
width: '0%',
height: '3px',
backgroundColor: 'blue',
transition: 'width 400ms ease-out, height 400ms linear'
}
};
} componentWillReceiveProps(nextProps) {
if (nextProps.status) {
let progress = 0;
this.setState({
style: Object.assign({}, this.state.style, {
width: '0%'
})
}); let timer = setInterval(() => {
if (progress <= (100 - nextProps.step)) {
this.setState({
style: Object.assign({}, this.state.style, {
width: `${progress += nextProps.step}%`,
display: 'block'
})
});
}
}, nextProps.speed); this.setState({
timer: timer
});
} else {
clearInterval(this.state.timer); this.setState({
timer: null,
style: Object.assign({}, this.state.style, {
width: '100%',
display: 'none'
})
});
}
} render() {
return (
<div>
<div style={this.state.style} className={this.props.className}></div>
<div style={{ display: 'table', clear: 'both' }}></div>
</div>
)
}
} LoadingBar.propTypes = {
className: PropTypes.string,
speed: PropTypes.number,
step: PropTypes.number,
status: PropTypes.bool,
} function mapStateToProps(state) {
return {...state.loading};
} export default connect(mapStateToProps)(LoadingBar)

App.jsx

import LoadingBar from 'LoadingBar';

const App = ({children}) => {
return (
<div>
<LoadingBar speed={5} step={2} />
{children}
</div>
);
}; App.propTypes = {
children: PropTypes.object
}; export default App;

loadingReducer.js

export default function loading(
state = {
status: false
},
action = {}
) {
switch (action.type) {
case 'SHOW_LOADING':
return Object.assign({}, state, {
status: true,
});
case 'HIDE_LOADING':
return Object.assign({}, state, {
status: false,
});
default:
return state
}
}

loadingActions.js

export function show() {
return { type: 'SHOW_LOADING' }
} export function hide() {
return { type: 'HIDE_LOADING' }
}

loadingMiddleware.js

import { show, hide } from './loadingActions';

const defaultTypeSuffixes = ['REQUEST', 'SUCCESS', 'FAILURE']

export default function loadingBarMiddleware(config = {}) {
const typeSuffixes = config.typeSuffixes || defaultTypeSuffixes; return ({ dispatch }) => next => action => {
next(action); if (action.type === undefined) {
return;
} const [PENDING, FULFILLED, REJECTED] = typeSuffixes; const isPending = `_${PENDING}`;
const isFulfilled = `_${FULFILLED}`;
const isRejected = `_${REJECTED}`; if (action.type.indexOf(isPending) !== -1) {
dispatch(show());
} else if (action.type.indexOf(isFulfilled) !== -1 || action.type.indexOf(isRejected) !== -1) {
dispatch(hide());
}
}
}

配置Store

import { createStore, applyMiddleware } from 'redux';
import { loadingMiddleware } from 'loadingMiddleware';
import rootReducer from './reducers'; const store = createStore(
rootReducer,
applyMiddleware(loadingMiddleware())
)

配置RootReducer

import { combineReducers } from 'redux';
import { loadingReducer } from './loadingReducer'; const reducer = combineReducers({
loading: loadingReducer,
});

写了一个基于React+Redux的仿Github进度条的更多相关文章

  1. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

  2. RSuite 一个基于 React.js 的 Web 组件库

    RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...

  3. 快速搭建一个基于react的项目

    最近在学习react,快速搭建一个基于react的项目 1.创建一个放项目文件夹,用编辑器打开 2.打开集成终端输入命令: npm install -g create-react-app 3. cre ...

  4. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  5. 一个基于React整套技术栈+Node.js的前端页面制作工具

    pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...

  6. 基于Vue的事件响应式进度条组件

    写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...

  7. iOS适配UIViewView/WKWebView,H5生成长图,仿微信进度条

    前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...

  8. mk-js,一个基于react、nodejs的全栈框架

    前言 在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人说自己搞前端.去年年初接触的react,16年7月份在github开源了一套针对react.redux探索的项目,近期和伙伴们一起 ...

  9. mk框架,一个基于react、nodejs全栈框架

    在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人打招呼,作为一个前端领域的小学生,去年年初接触了react,之后一发不可收拾爱上了它,近期重构了自己去年开源的一个项目,废话到此结束句号 ...

随机推荐

  1. 我读汤姆大叔的深入理解js(二)

    继续汤姆大叔的js之旅. 揭秘命名函数表达式 函数表达式和函数声明 汤姆大叔在博客中引用ECMA规范:函数声明必须带有标识符,函数表达式可以省略.对于我来说这些概念的东西真是不所适从.还是大叔的实例带 ...

  2. 构建Maven聚合工程

    最近,准备构建一个Maven的项目,基于模块化的结构思想,决定使用Maven的聚合工程进行构建. 环境准备: (1)eclipse 这里推荐使用spring封装的eclipse(即STS) ,STS中 ...

  3. Android开源项目分类汇总

    目前包括: Android开源项目第一篇——个性化控件(View)篇   包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView. ...

  4. AngulaJS路由 ui-router 传递多个参数

    定义路由: .state('txnresult', { url: '/txnresult/:originAmount/:finalAmount/:currentPoint/:txnId/:discou ...

  5. Web 项目中分享到微博、QQ空间等分享功能

    Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...

  6. oracle 调用java

    1.首先在PL/SQL中创建JAVA类,并编译 例如:这个是到的一个查询目录下面文件列表的java类 创建此java 类用: create or replace and compile java so ...

  7. 【NoSql】MongoDb

    [NoSql]MongoDb 一. 文档 1. 官网 2. C# Driver 3. C# 开发文档 二. 命令 1. --config "C:\mongodb\mongod.cfg&quo ...

  8. scrollview背景头部拉伸

    a - (void)viewDidLoad { [super viewDidLoad]; self.tableView.contentInset = UIEdgeInsetsMake(kImageOr ...

  9. Grub实践

    为运行于虚拟机上的CentOS 6添加一块新硬件,提供两个主分区: (1) 为硬盘新建两个主分区:并为其安装grub: (2) 为硬盘的第一个主分区提供内核和ramdisk文件: 为第二个分区提供ro ...

  10. EhCache RMI 分布式缓存/缓存集群

    EhCache 系统简介 EhCache 是一个纯 Java 的进程内缓存框架,具有快速.精干等特点. EhCache 的主要特性有: 快速.精干 简单: 多种缓存策略: 缓存数据有两级:内存和磁盘, ...