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