Redux: Téléchargement de fichier retardé... où placer les objets de fichier ?

Une solution possible serait d'écouter le magasin pour les changements d'état à l'aide de store.subscribe bien que je ne sache pas comment accéder à store.subscribe à l'aide de connect(...) . Peut-être this.context.store.subscribe() ?

@olalonde La recommandation selon laquelle l'État devrait être sérialisable est une recommandation douce - ce n'est pas la pierre angulaire. Il existe principalement afin de faciliter le rendu côté serveur et la prise d'instantanés d'état car vous devez pouvoir sérialiser votre état afin de l'hydrater sur le client ou de l'envoyer quelque part. Comme cela est purement fait sur le client, il n'est peut-être pas trop mal d'aller de l'avant et de stocker cet objet de fichier à court terme pour un traitement ultérieur.

Et même si vous sérialisez ensuite votre état, un descripteur File sera sérialisé en un objet objet, vous n'obtiendrez donc pas d'erreur de sérialisation.

Merci. J'ai fini par envelopper mon créateur d'action de téléchargement avec la fonction suivante :

waitIntroMessageShowedActionCreator.js

// delays execution of `fn` until `state.session.user.ui.introMessageShowed === true`

export const initWaitIntroMessageShowed = ({ getState, subscribe }) => (fn) => () => (
  new Promise((resolve, reject) => {
    const handleChange = () => {
      const state = getState()
      if (!state.session.user.ui) return null
      if (!state.session.user.ui.introMessageShowed) return null
      /* eslint-disable no-use-before-define */
      unsubscribe()
      return Promise
        .resolve()
        .then(() => fn())
        .catch(reject)
        .then(resolve)
    }
    const unsubscribe = subscribe(handleChange)
    handleChange()
  })
)

et dans mon composant :

class DragDropSignup extends Component {
  constructor(props) {
    super(props)
    const waitIntroMessageShowed = initWaitIntroMessageShowed(this.props.store)
    this.onSignupSuccess = waitIntroMessageShowed(this.onSignupSuccess.bind(this))
  }
 // ...
}
// ...

// pass store object as prop
const connectStore = () => (WrappedComponent) => {
  const ConnectStore = (props, context) => (
    <WrappedComponent store={context.store} {...props} />
  )
  ConnectStore.contextTypes = { store: React.PropTypes.object }
  return ConnectStore
}

export default connectStore()(connect()(DragDropSignup))

Publier ici au cas où cela serait utile à quelqu'un