Redux

SME Uploader supports the popular Redux state management library in two ways:

Redux Store

You can tell SME Uploader 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:

const { createStore } = require('redux');
const createReduxStore = require('@sme-uploader/store-redux');

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

const uploader = new SmeUploader({
  store: createReduxStore({
    store: createStore(reducer) // That’s a lot of stores!
  })
});

Keep in mind that SME Uploader 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 SME Uploader state from persistence.

If you’d like to persist your SME Uploader state — please look into @sme-uploader/golden-retriever. It’s a plugin created specifically for saving and restoring SME Uploader 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:

const SmeUploader = require('@sme-uploader/core')
const ReduxDevTools = require('@sme-uploader/redux-dev-tools')

const uploader = new SmeUploader({
  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 SME Uploader’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 SME Uploader like in the example above, since it will just work automatically in that case.

Found a mistake or want to help improve this documentation? Edit/fork this page directly on Github