曾经实现过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. MapReduce 过程分析

    原文地址:http://blog.jobbole.com/81676/ 2.WordCount处理过程 上面给出了WordCount的设计思路和源码,但是没有深入细节,下面对WordCount进行更加 ...

  2. iOS Safari 上加载的最大的图片尺寸

    做WAP端项目时发现, 写css代码显示图片, 却显示不出.或用canvas 来加载图片的某一部分的时候显示不出, 代码如下: background: url() no-repeat -1000px ...

  3. 错误“Sources”参数中指定了多次。“Sources”参数不支持重复项。

    在“Sources”参数中指定了项“”多次.“Sources”参数不支持重复项. Asp.Net关于错误“Sources”参数中指定了多次.“Sources”参数不支持重复项. “Sources”参数 ...

  4. Git命令学习摘要

    1.git init  --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...

  5. bootstrap datetimerange

    天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得: 插件开源地址:daterangepicker日期控件, 插件使用只要按照开源中的文档信息来就好先包括以下引用: < ...

  6. oracle 数据库的学习1

    1.oracle 数据库常用的基本类型 char(10)  -->存储固定长度的字符串 varchar2(10)-->存储可变长的字符串 Date INTEGER -->存储整数 N ...

  7. webView 点击页面跳转到浏览器

    @interface ForumDetailViewController ()<UIWebViewDelegate> { NSUInteger _clickedNumber; } @end ...

  8. 选择c3p0作为连接池

    <hibernate-configuration>     <session-factory>         <property name="dialect& ...

  9. C# SHA1散列算法

    C# SHA1散列算法 /// <summary> /// C# SHA1散列算法 /// </summary> /// <param name="str&qu ...

  10. Gradle笔记系列(一)

    1.Gradle概述 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建工具.它使用一种基于Groovy的特定领域语言(DSL)来声明项目设置,抛弃了基于XML的 ...