uppy/website/src/docs/redux.md

---

title: "Redux" type: docs module: "@uppy/store-redux" permalink: docs/redux/ order: 9 category: "Miscellaneous"

tagline: "Uppy can use your app’s Redux store for its files and UI state"

Uppy supports the popular Redux state management library in two ways:

Redux Store

You can tell Uppy to use your app’s Redux store for its files and UI state. Please check out Custom Stores for more information on that. Here’s an example to give you a sense of how this works:

import { createStore } from 'redux'
import createReduxStore from '@uppy/store-redux'

const reducer = combineReducers({
  ...reducers,
  uppy: ReduxStore.reducer,
})

const uppy = new Uppy({
  store: createReduxStore({
    store: createStore(reducer), // That’s a lot of stores!
  }),
})

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.

If you’d like to persist your Uppy state — please look into @uppy/golden-retriever. It’s a plugin created specifically for saving and restoring Uppy state, including selected files and upload progress.

Redux Dev Tools

This is a ReduxDevTools plugin that simply syncs with the redux-devtools browser or JS extensions, and allows for basic time travel:

import Uppy from '@uppy/core'
import ReduxDevTools from '@uppy/redux-dev-tools'

const uppy = new Uppy({
  debug: true,
  meta: {
    username: 'John',
    license: 'Creative Commons',
  },
})
  .use(XHRUpload, { endpoint: 'https://example.com' })
  .use(ReduxDevTools)

After you .use(ReduxDevTools), you should be able to see Uppy’s state in Redux Dev Tools.

You will likely not need this if you are actually using Redux yourself, as well as Redux Store in Uppy like in the example above, since it will just work automatically in that case.