From 1f8a6d66baaa4095e54330c6ddb46f8e3adca885 Mon Sep 17 00:00:00 2001
From: Merlijn Vos <merlijn@soverin.net>
Date: Wed, 6 Oct 2021 15:29:22 +0200
Subject: [PATCH] Improve docs on redux store integration (#3227)

---
 packages/@uppy/store-redux/README.md | 22 ++++++++-------------
 website/src/docs/redux.md            | 20 +++++++++----------
 website/src/docs/stores.md           | 29 ++++++++++------------------
 3 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/packages/@uppy/store-redux/README.md b/packages/@uppy/store-redux/README.md
index 4f3dd1c6cc..8636d8ddad 100644
--- a/packages/@uppy/store-redux/README.md
+++ b/packages/@uppy/store-redux/README.md
@@ -15,23 +15,17 @@ Uppy is being developed by the folks at [Transloadit](https://transloadit.com),
 ## Example
 
 ```js
-import { combineReducers, createStore } from 'redux'
 import Uppy from '@uppy/core'
-import ReduxStore from '@uppy/store-redux'
-import reducers from './reducers'
+import * as ReduxStore from '@uppy/store-redux'
+import * as Redux from 'redux'
 
-const reducer = combineReducers({
-  ...reducers,
-  uppy: ReduxStore.reducer,
-})
+function createStore (reducers = {}) {
+  const reducer = Redux.combineReducers({ ...reducers, uppy: ReduxStore.reducer })
+  return Redux.createStore(reducer)
+}
 
-const store = createStore(reducer)
-
-const uppy = new Uppy({
-  store: ReduxStore({
-    store,
-  }),
-})
+const store = new ReduxStore.ReduxStore({ store: createStore() })
+const uppy = new Uppy({ store })
 ```
 
 ## Installation
diff --git a/website/src/docs/redux.md b/website/src/docs/redux.md
index ee53d3cc2a..b20f560f3f 100644
--- a/website/src/docs/redux.md
+++ b/website/src/docs/redux.md
@@ -15,19 +15,17 @@ Uppy supports the popular [Redux](https://redux.js.org/) state management librar
 You can tell Uppy to use your app’s Redux store for its files and UI state. Please check out [Custom Stores](/docs/stores/) for more information on that. Here’s an example to give you a sense of how this works:
 
 ```js
-import { createStore } from 'redux'
-import createReduxStore from '@uppy/store-redux'
+import Uppy from '@uppy/core'
+import * as ReduxStore from '@uppy/store-redux'
+import * as Redux from 'redux'
 
-const reducer = combineReducers({
-  ...reducers,
-  uppy: ReduxStore.reducer,
-})
+function createStore (reducers = {}) {
+  const reducer = Redux.combineReducers({ ...reducers, uppy: ReduxStore.reducer })
+  return Redux.createStore(reducer)
+}
 
-const uppy = new Uppy({
-  store: createReduxStore({
-    store: createStore(reducer), // That’s a lot of stores!
-  }),
-})
+const store = new ReduxStore.ReduxStore({ store: createStore() })
+const uppy = new Uppy({ store })
 ```
 
 Keep in mind that Uppy state is not serializable (because we have to keep track of files with data blobs). So, if you persist your Redux state, you should exclude Uppy state from persistence.
diff --git a/website/src/docs/stores.md b/website/src/docs/stores.md
index db0b6f0122..974d8efc7b 100644
--- a/website/src/docs/stores.md
+++ b/website/src/docs/stores.md
@@ -45,29 +45,20 @@ 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:
+Here is how you can integrate Uppy's `ReduxStore`:
 
 ```js
-import ReduxStore from '@uppy/store-redux'
+import Uppy from '@uppy/core'
+import * as ReduxStore from '@uppy/store-redux'
+import * as Redux from 'redux'
 
-const reducer = combineReducers({
-  ...reducers,
-  uppy: ReduxStore.reducer,
-})
-```
-
-Then pass a Redux store instance to the Uppy constructor:
-
-```js
-import { createStore } from 'redux'
-import ReduxStore from '@uppy/store-redux'
+function createStore (reducers = {}) {
+  const reducer = Redux.combineReducers({ ...reducers, uppy: ReduxStore.reducer })
+  return Redux.createStore(reducer)
+}
 
-const store = createStore(reducer)
-const uppy = new Uppy({
-  store: ReduxStore({
-    store, // That's a lot of stores!
-  }),
-})
+const store = new ReduxStore.ReduxStore({ store: createStore() })
+const uppy = new Uppy({ store })
 ```
 
 #### `opts.store`