Improve docs on redux store integration (#3227)

transloadit · Oct 6, 2021 · 1f8a6d6 · 1f8a6d6
1 parent 8fbabe4
commit 1f8a6d6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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`