mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-18 00:55:35 +00:00
Add Redux example
This commit is contained in:
Renée Kooi
parent
972eb5b6c2
commit
92ad83b82a
7 changed files with 3244 additions and 0 deletions
1
examples/redux/.gitignore
vendored
Normal file
1
examples/redux/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
uppy.min.css
|
||||
7
examples/redux/aliasify.js
Normal file
7
examples/redux/aliasify.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
replacements: {
|
||||
'^uppy/lib/(.*?)$': path.join(__dirname, '../../src/$1')
|
||||
}
|
||||
}
|
||||
27
examples/redux/index.html
Normal file
27
examples/redux/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Uppy example: Redux</title>
|
||||
</head>
|
||||
<body>
|
||||
<main id="app">
|
||||
<h1>A counter</h1>
|
||||
<div>
|
||||
<p>
|
||||
Clicked: <span id="value">0</span> times
|
||||
<button id="increment">+</button>
|
||||
<button id="decrement">-</button>
|
||||
<button id="incrementIfOdd">Increment if odd</button>
|
||||
<button id="incrementAsync">Increment async</button>
|
||||
</p>
|
||||
</div>
|
||||
<h1>An Uppy</h1>
|
||||
<div id="uppy"></div>
|
||||
</main>
|
||||
|
||||
<link href="uppy.min.css" rel="stylesheet">
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
83
examples/redux/main.js
Normal file
83
examples/redux/main.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
const { createStore, compose, combineReducers, applyMiddleware } = require('redux')
|
||||
const logger = require('redux-logger').default
|
||||
const Uppy = require('uppy/lib/core')
|
||||
const uppyReduxStore = require('uppy/lib/store/ReduxStore')
|
||||
const Dashboard = require('uppy/lib/plugins/Dashboard')
|
||||
const Tus = require('uppy/lib/plugins/Tus')
|
||||
|
||||
function counter (state = 0, action) {
|
||||
switch (action.type) {
|
||||
case 'INCREMENT':
|
||||
return state + 1
|
||||
case 'DECREMENT':
|
||||
return state - 1
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
const reducer = combineReducers({
|
||||
counter: counter,
|
||||
// You don't have to use the `uppy` key. But if you don't,
|
||||
// you need to provide a custom `selector` to the `uppyReduxStore` call below.
|
||||
uppy: uppyReduxStore.reducer
|
||||
})
|
||||
|
||||
let enhancer = applyMiddleware(
|
||||
uppyReduxStore.middleware(),
|
||||
logger
|
||||
)
|
||||
if (window.__REDUX_DEVTOOLS_EXTENSION__) {
|
||||
enhancer = compose(enhancer, window.__REDUX_DEVTOOLS_EXTENSION__())
|
||||
}
|
||||
|
||||
const store = createStore(reducer, enhancer)
|
||||
|
||||
// Counter example from https://github.com/reactjs/redux/blob/master/examples/counter-vanilla/index.html
|
||||
const valueEl = document.querySelector('#value')
|
||||
|
||||
function getCounter () { return store.getState().counter }
|
||||
function render () {
|
||||
valueEl.innerHTML = getCounter().toString()
|
||||
}
|
||||
render()
|
||||
store.subscribe(render)
|
||||
|
||||
document.querySelector('#increment').onclick = () => {
|
||||
store.dispatch({ type: 'INCREMENT' })
|
||||
}
|
||||
document.querySelector('#decrement').onclick = () => {
|
||||
store.dispatch({ type: 'DECREMENT' })
|
||||
}
|
||||
document.querySelector('#incrementIfOdd').onclick = () => {
|
||||
if (getCounter() % 2 !== 0) {
|
||||
store.dispatch({ type: 'INCREMENT' })
|
||||
}
|
||||
}
|
||||
document.querySelector('#incrementAsync').onclick = () => {
|
||||
setTimeout(() => store.dispatch({ type: 'INCREMENT' }), 1000)
|
||||
}
|
||||
|
||||
// Uppy using the same store
|
||||
const uppy = Uppy({
|
||||
id: 'redux',
|
||||
store: uppyReduxStore({ store: store }),
|
||||
// If we had placed our `reducer` elsewhere in Redux, eg. under an `uppy` key in the state for a profile page,
|
||||
// we'd do something like:
|
||||
//
|
||||
// store: uppyReduxStore({
|
||||
// store: store,
|
||||
// id: 'avatar',
|
||||
// selector: state => state.pages.profile.uppy
|
||||
// }),
|
||||
debug: true
|
||||
})
|
||||
uppy.use(Dashboard, {
|
||||
target: '#app',
|
||||
inline: true,
|
||||
maxWidth: 400
|
||||
})
|
||||
uppy.use(Tus, { endpoint: 'https://master.tus.io/' })
|
||||
uppy.run()
|
||||
|
||||
window.uppy = uppy
|
||||
3092
examples/redux/package-lock.json
generated
Normal file
3092
examples/redux/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
18
examples/redux/package.json
Normal file
18
examples/redux/package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"private": true,
|
||||
"name": "uppy-redux-example",
|
||||
"scripts": {
|
||||
"css": "cp ../../dist/uppy.min.css .",
|
||||
"start": "npm run css && budo main.js:bundle.js -- -t babelify -g aliasify"
|
||||
},
|
||||
"aliasify": "./aliasify.js",
|
||||
"dependencies": {
|
||||
"redux": "^3.7.2",
|
||||
"redux-logger": "^3.0.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"aliasify": "^2.1.0",
|
||||
"babelify": "^7.3.0",
|
||||
"budo": "^10.0.4"
|
||||
}
|
||||
}
|
||||
16
examples/redux/readme.md
Normal file
16
examples/redux/readme.md
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# Redux
|
||||
|
||||
This example uses Uppy with a Redux store.
|
||||
The same Redux store is also used for other parts of the application, namely the counter example.
|
||||
Each action is logged to the console using [redux-logger](https://github.com/theaqua/redux-logger).
|
||||
|
||||
This example supports the [Redux Devtools extension](https://github.com/zalmoxisus/redux-devtools-extension), including time travel.
|
||||
|
||||
## Run it
|
||||
|
||||
Move into this directory, then:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue