react-redux-demo
所属分类:人工智能/神经网络/深度学习
开发工具:JavaScript
文件大小:0KB
下载次数:0
上传日期:2015-08-15 10:31:21
上 传 者:
sh-1993
说明: 娱乐博览会
(Fun Fair)
文件列表:
.babelrc (46, 2015-08-15)
.eslintrc (207, 2015-08-15)
package.json (1458, 2015-08-15)
public/ (0, 2015-08-15)
public/build.html (1046, 2015-08-15)
public/index.html (1134, 2015-08-15)
src/ (0, 2015-08-15)
src/Root.js (1559, 2015-08-15)
src/actions/ (0, 2015-08-15)
src/actions/FunFairShiftActions.js (415, 2015-08-15)
src/actions/GenericActions.js (262, 2015-08-15)
src/actions/SemaphoreActions.js (1513, 2015-08-15)
src/components/ (0, 2015-08-15)
src/components/Comment.js (529, 2015-08-15)
src/components/Comments.js (428, 2015-08-15)
src/components/FunFairShift.js (999, 2015-08-15)
src/components/FunFairShifts.js (2020, 2015-08-15)
src/components/Semaphore.js (2108, 2015-08-15)
src/components/SemaphoreStateForm.js (3133, 2015-08-15)
src/components/Semaphores.js (3824, 2015-08-15)
src/constants/ (0, 2015-08-15)
src/constants/ActionTypes.js (396, 2015-08-15)
src/constants/index.js (733, 2015-08-15)
src/container/ (0, 2015-08-15)
src/container/FunFairShiftsApp.js (283, 2015-08-15)
src/index.js (443, 2015-08-15)
src/middleware/ (0, 2015-08-15)
src/middleware/api.js (1211, 2015-08-15)
src/middleware/throttle.js (420, 2015-08-15)
src/reducers/ (0, 2015-08-15)
src/reducers/funFairShifts.js (939, 2015-08-15)
src/reducers/index.js (84, 2015-08-15)
src/reducers/semaphores.js (1156, 2015-08-15)
src/scss/ (0, 2015-08-15)
src/scss/stylesheet.scss (7063, 2015-08-15)
src/util/ (0, 2015-08-15)
src/util/helpers.js (349, 2015-08-15)
src/util/templateHelpers.js (451, 2015-08-15)
... ...
# React + Redux + React-Router demo
## Introduction
Since I got excited about the React + Redux combo, I've tried it out on a current project. It was working well for me,
so I've extracted relevant parts out into this demo.
This demo application represents a "fun fair" (amusement park) with two daily shifts (morning and afternoon), while each
shift has a group of semaphores to indicate the queue length (of people waiting for the attraction).
The semaphores are updated automatically server-side (just polling every 5 seconds in this demo), but employees can
also change the state of a semaphore by clicking on it and submitting the form.
## JS stack
* ES6, Webpack, Babel
* React 0.14.0-beta1 + Redux 1.0.0 + React-router 1.0.0-beta3
* [fetch](https://github.com/github/fetch)
* [classnames](https://github.com/JedWatson/classnames)
* Lodash + [babel-plugin-lodash](https://github.com/megawac/babel-plugin-lodash)
## CSS stack
* SASS (node-sass)
* PureCSS
* PostCSS + Autoprefixer
## Features
* Async actions (i.e. XHRs)
* Middleware
* [redux-thunk](https://github.com/gaearon/redux-thunk)
* [redux-logger](https://github.com/fcomb/redux-logger)
* Custom "api" middleware for XHRs
* Custom "throttle" middleware
* Basic development/production toggle
* `__DEV__`: react-hot-loader, logger middleware
* Non-`__DEV__`: optimize with UglifyJS
* CSS is compiled separately
## Development
npm install
npm run dev
Go to [http://localhost:8080/public](http://localhost:8080/public).
## Production build
npm run build
Find build at `./build/bundle.js`.
## TODO
* Improve on applying Redux architecture
* Better error handling
* Input validation
* Better config options
近期下载者:
相关文件:
收藏者: