Przeglądaj źródła

website: document included stores

Renée Kooi 7 lat temu
rodzic
commit
e0041c3cd4
1 zmienionych plików z 68 dodań i 0 usunięć
  1. 68 0
      website/src/docs/stores.md

+ 68 - 0
website/src/docs/stores.md

@@ -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.