写了一个基于React+Redux的仿Github进度条
曾经实现过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进度条的更多相关文章
- 实例讲解基于 React+Redux 的前端开发流程
原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
- 快速搭建一个基于react的项目
最近在学习react,快速搭建一个基于react的项目 1.创建一个放项目文件夹,用编辑器打开 2.打开集成终端输入命令: npm install -g create-react-app 3. cre ...
- 基于React,Redux以及wilddog的聊天室简单实现
本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...
- 一个基于React整套技术栈+Node.js的前端页面制作工具
pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前 ...
- 基于Vue的事件响应式进度条组件
写在前面 找了很多Vue 进度条组件!,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和 ...
- iOS适配UIViewView/WKWebView,H5生成长图,仿微信进度条
前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...
- mk-js,一个基于react、nodejs的全栈框架
前言 在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人说自己搞前端.去年年初接触的react,16年7月份在github开源了一套针对react.redux探索的项目,近期和伙伴们一起 ...
- mk框架,一个基于react、nodejs全栈框架
在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人打招呼,作为一个前端领域的小学生,去年年初接触了react,之后一发不可收拾爱上了它,近期重构了自己去年开源的一个项目,废话到此结束句号 ...
随机推荐
- MapReduce 过程分析
原文地址:http://blog.jobbole.com/81676/ 2.WordCount处理过程 上面给出了WordCount的设计思路和源码,但是没有深入细节,下面对WordCount进行更加 ...
- iOS Safari 上加载的最大的图片尺寸
做WAP端项目时发现, 写css代码显示图片, 却显示不出.或用canvas 来加载图片的某一部分的时候显示不出, 代码如下: background: url() no-repeat -1000px ...
- 错误“Sources”参数中指定了多次。“Sources”参数不支持重复项。
在“Sources”参数中指定了项“”多次.“Sources”参数不支持重复项. Asp.Net关于错误“Sources”参数中指定了多次.“Sources”参数不支持重复项. “Sources”参数 ...
- Git命令学习摘要
1.git init --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...
- bootstrap datetimerange
天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得: 插件开源地址:daterangepicker日期控件, 插件使用只要按照开源中的文档信息来就好先包括以下引用: < ...
- oracle 数据库的学习1
1.oracle 数据库常用的基本类型 char(10) -->存储固定长度的字符串 varchar2(10)-->存储可变长的字符串 Date INTEGER -->存储整数 N ...
- webView 点击页面跳转到浏览器
@interface ForumDetailViewController ()<UIWebViewDelegate> { NSUInteger _clickedNumber; } @end ...
- 选择c3p0作为连接池
<hibernate-configuration> <session-factory> <property name="dialect& ...
- C# SHA1散列算法
C# SHA1散列算法 /// <summary> /// C# SHA1散列算法 /// </summary> /// <param name="str&qu ...
- Gradle笔记系列(一)
1.Gradle概述 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的 ...