Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve docs on redux store integration #3227

Merged
merged 3 commits into from Oct 6, 2021
Merged

Improve docs on redux store integration #3227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
267d1f0
Update redux store docs
Murderlon Sep 27, 2021
6cc1029
Fix import in docs and update `store-redux/README.md`
Murderlon Oct 1, 2021
6f8517e
Actually fix import in docs..
Murderlon Oct 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 8 additions & 14 deletions packages/@uppy/store-redux/README.md
View file
Open in desktop
Expand Up @@ -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
Expand Down
20 changes: 9 additions & 11 deletions website/src/docs/redux.md
View file
Open in desktop
Expand Up @@ -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.
Expand Down
29 changes: 10 additions & 19 deletions website/src/docs/stores.md
View file
Open in desktop
Expand Up @@ -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`
Expand Down