Qual é a diferença entre redux-thunk e redux-promessa?

Tanto quanto eu sei e corrijo-me se estou errado, redux-thunk é um middleware que nos ajuda a despachar funções assíncronas e valores de depuração na própria ação, enquanto quando eu usei redux-promessa não pude criar funções assíncronas sem implementar minhas próprias como Action lança uma exceção de despachar apenas objetos simples.

Quais são as principais diferenças entre esses dois pacotes? Há alguma vantagem em usar os dois pacotes em um aplicativo de reação de página única ou usar redux-thunk seria o suficiente?

redux-thunk permite que seus criadores de ação retornem uma função:

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise permite que eles retornem uma promessa:

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

Ambas as bibliotecas são úteis se você precisar despachar a ação assíncrona ou condicionalmente. redux-thunktambém permite que você despache várias vezes dentro de um criador de ação. Se você escolhe um, o outro ou ambos depende inteiramente de suas necessidades / estilo.

Você provavelmente vai querer / precisar dos dois juntos em seu aplicativo. Comece com redux-promessa para tarefas assíncronas de produção de promessa de rotina e, em seguida, amplie para adicionar Thunks (ou Sagas, etc.) conforme a complexidade aumenta :

• Quando a vida é simples, e você está apenas fazendo um trabalho assíncrono básico com criadores que retornam uma única promessa, então redux-promiseirá melhorar sua vida e simplificar isso, rápido e fácil. (Resumindo, em vez de você precisar pensar em 'desembrulhar' suas promessas quando elas forem resolvidas, em seguida, escrever / despachar os resultados, redux-promessa (-middleware) cuida de todas essas coisas chatas para você.)
• Mas, a vida fica mais complexa quando:
  • Talvez o seu criador de ação queira produzir várias promessas, que você deseja despachar como ações separadas para redutores separados.
  • Ou você tem algum pré-processamento complexo e lógica condicional para gerenciar, antes de decidir como e para onde enviar os resultados?

Nesses casos, o benefício de redux-thunké permitir que você encapsule a complexidade dentro de seu criador de ação .

Mas observe que se o Thunk produz e despacha promessas, você vai querer usar as duas bibliotecas juntas :

• o Thunk iria compor a (s) ação (ões) original (is) e despachá-las
• redux-promisetrataria então de desembrulhar no (s) redutor (es) as promessas individuais geradas por seu Thunk, para evitar o clichê que isso implica. (Você poderia fazer tudo no Thunks, com promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... mas por que faria?)

Outra maneira simples de resumir a diferença nos casos de uso: o início vs. o fim do ciclo de ação Redux :

• Thunks são para o início de seu fluxo Redux: se você precisa criar uma ação complexa, ou encapsular alguma lógica de criação de ação complicada, mantendo-a fora de seus componentes e definitivamente fora de redutores.
• redux-promiseé para o fim do seu fluxo, uma vez que tudo foi reduzido a promessas simples, e você só quer desembrulhá-las e armazenar seu valor resolvido / rejeitado na loja

  ---

NOTAS / REFS:

• Acho redux-promise-middlewareque é uma implementação mais completa e compreensível da ideia por trás do original redux-promise. Está em desenvolvimento ativo e também é complementado por redux-promise-reducer.
• existem middlewares semelhantes adicionais disponíveis para compor / sequenciar suas ações complexas: um muito popular é redux-saga, que é muito semelhante redux-thunk, mas é baseado na sintaxe de funções geradoras. Novamente, você provavelmente o usaria em conjunto com redux-promise.
• Aqui está um ótimo artigo comparando diretamente várias opções de composição assíncrona, incluindo thunk e redux-promessa-middleware. (TL; DR: "Redux Promise Middleware reduz bastante o boilerplate em comparação com algumas das outras opções" ... "Acho que gosto do Saga para aplicativos mais complexos (leia:" usa ") e Redux Promise Middleware para todo o resto." )
• Observe que há um caso importante em que você pode pensar que precisa despachar várias ações, mas realmente não precisa, e pode manter as coisas simples simples. É aí que você deseja que vários redutores reajam à sua chamada assíncrona. Porém, não há razão para que vários redutores não possam monitorar um único tipo de ação. Você simplesmente quer ter certeza de que sua equipe sabe que você está usando essa convenção, para que eles não presumam que apenas um único redutor (com um nome relacionado) pode lidar com uma determinada ação.

Divulgação completa: Eu sou relativamente novo no desenvolvimento do Redux e tive problemas com essa questão sozinho. Vou parafrasear a resposta mais sucinta que encontrei:

ReduxPromise retorna uma promessa como carga útil quando uma ação é despachada e, em seguida, o middleware ReduxPromise trabalha para resolver essa promessa e passar o resultado para o redutor.

ReduxThunk, por outro lado, força o criador da ação a adiar o despacho real do objeto de ação para os redutores até que o despacho seja chamado.

Aqui está um link para o tutorial onde encontrei essas informações: https://blog.tighten.co/react-101-part-4-firebase .