Redux: Carregamento de arquivo atrasado ... onde colocar os objetos de Arquivo?

Criado em 18 jul. 2016  ·  3Comentários  ·  Fonte: reduxjs/redux

Estou procurando uma sugestão sobre como lidar com uploads de arquivos. Eu tenho uma página de destino onde os usuários podem arrastar e soltar um arquivo e, em seguida, são solicitados a se inscrever antes que o upload do arquivo comece. Preciso manter o objeto de arquivo arrastado em algum lugar, mas como o estado Redux só deve conter objetos JS simples, não tenho certeza de onde colocar esse objeto de arquivo. Eu poderia mantê-lo em algum estado / prop React, mas depois tenho que ter certeza de que ele será eventualmente passado para o componente certo, etc.

Comentários muito úteis

@olalonde A recomendação de que o estado deve ser serializável é suave - não é

E mesmo se você serializar seu estado - um descritor File será serializado para um objeto objeto, portanto, você não receberá um erro de serialização.

Todos 3 comentários

Uma solução possível seria ouvir a loja quanto às mudanças de estado usando store.subscribe, embora eu não tenha certeza de como obter acesso a store.subscribe usando connect(...) . Talvez this.context.store.subscribe() ?

@olalonde A recomendação de que o estado deve ser serializável é suave - não é

E mesmo se você serializar seu estado - um descritor File será serializado para um objeto objeto, portanto, você não receberá um erro de serialização.

Obrigado. Acabei envolvendo meu criador de ação de upload com a seguinte função:

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()
  })
)

e no meu componente:

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))

Postar aqui caso seja útil para alguém

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

ramakay picture ramakay  ·  3Comentários

parallelthought picture parallelthought  ·  3Comentários

captbaritone picture captbaritone  ·  3Comentários

caojinli picture caojinli  ·  3Comentários

vslinko picture vslinko  ·  3Comentários