/
main.js
83 lines (74 loc) · 2.27 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const { createStore, compose, combineReducers, applyMiddleware } = require('redux')
const logger = require('redux-logger').default
const Uppy = require('@uppy/core')
const uppyReduxStore = require('@uppy/store-redux')
const Dashboard = require('@uppy/dashboard')
const Tus = require('@uppy/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,
// 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 (typeof __REDUX_DEVTOOLS_EXTENSION__ !== 'undefined') {
// eslint-disable-next-line no-undef
enhancer = compose(enhancer, __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 = new Uppy({
id: 'redux',
store: uppyReduxStore({ 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,
width: 400,
})
uppy.use(Tus, { endpoint: 'https://tusd.tusdemo.net/' })
window.uppy = uppy