|
@@ -27,6 +27,74 @@ const uppy = Uppy({
|
|
})
|
|
})
|
|
```
|
|
```
|
|
|
|
|
|
|
|
+### `DefaultStore`
|
|
|
|
+
|
|
|
|
+Uppy uses the `DefaultStore`…by default! You do not need to do anything to use it.
|
|
|
|
+It does not take any options.
|
|
|
|
+
|
|
|
|
+### `ReduxStore`
|
|
|
|
+
|
|
|
|
+The `ReduxStore` stores Uppy state on a key in an existing Redux store.
|
|
|
|
+The `ReduxStore` dispatches `uppy/STATE_UPDATE` actions to update state.
|
|
|
|
+When the state in Redux changes, it notifies Uppy.
|
|
|
|
+This way, you get most of the benefits of Redux, including support for the Redux Devtools and time traveling!
|
|
|
|
+
|
|
|
|
+To use the `ReduxStore`, add its reducer to the `uppy` key:
|
|
|
|
+
|
|
|
|
+```js
|
|
|
|
+const ReduxStore = require('uppy/lib/store/ReduxStore')
|
|
|
|
+const reducer = combineReducers({
|
|
|
|
+ ...reducers,
|
|
|
|
+ uppy: ReduxStore.reducer
|
|
|
|
+})
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+Then pass a Redux store instance to the Uppy constructor:
|
|
|
|
+
|
|
|
|
+```js
|
|
|
|
+const { createStore } = require('redux')
|
|
|
|
+const ReduxStore = require('uppy/lib/store/ReduxStore')
|
|
|
|
+
|
|
|
|
+const store = createStore(reducer)
|
|
|
|
+const uppy = Uppy({
|
|
|
|
+ store: ReduxStore({
|
|
|
|
+ store: store // That's a lot of stores!
|
|
|
|
+ })
|
|
|
|
+})
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+### `opts.store`
|
|
|
|
+
|
|
|
|
+Pass a Redux store instance, from `Redux.createStore`.
|
|
|
|
+This instance should have the Uppy reducer mounted somewhere already.
|
|
|
|
+
|
|
|
|
+### `opts.id`
|
|
|
|
+
|
|
|
|
+By default, the `ReduxStore` assumes Uppy state is stored on a `state.uppy[id]` key.
|
|
|
|
+`id` is randomly generated by the store constructor, but can be specified by passing an `id` option if it should be predictable.
|
|
|
|
+
|
|
|
|
+```js
|
|
|
|
+ReduxStore({
|
|
|
|
+ store: store,
|
|
|
|
+ id: 'avatarUpload'
|
|
|
|
+})
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+### `opts.selector`
|
|
|
|
+
|
|
|
|
+If you'd rather not store the Uppy state under the `state.uppy` key at all, use the `selector` option to the `ReduxStore` constructor to tell it where to find state instead:
|
|
|
|
+
|
|
|
|
+```js
|
|
|
|
+const uppy = Uppy({
|
|
|
|
+ store: ReduxStore({
|
|
|
|
+ store: store,
|
|
|
|
+ selector: state => state.pages.profile.uppy.avatarUpload
|
|
|
|
+ })
|
|
|
|
+})
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+If your app uses [`reselect`](https://npmjs.com/package/reselect), its selectors work very well with this!
|
|
|
|
+
|
|
## Implementing Stores
|
|
## Implementing Stores
|
|
|
|
|
|
An Uppy store is an object with three methods.
|
|
An Uppy store is an object with three methods.
|