Redux docs para bindActionCreators afirma que:
O único caso de uso
bindActionCreators
é quando você deseja passar alguns criadores de ação para um componente que não está ciente do Redux e não quer passar o envio ou o armazenamento do Redux para ele.
Qual seria um exemplo onde bindActionCreators
seria usado / necessário?
Qual tipo de componente não estaria ciente do Redux ?
Quais são as vantagens / desvantagens de ambas as opções?
//actionCreator
import * as actionCreators from './actionCreators'
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch)
}
vs
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return {
someCallback: (postId, index) => {
dispatch({
type: 'REMOVE_COMMENT',
postId,
index
})
}
}
}
fonte
#3
uma abreviação de opção#1
?mapDispatchToProps
:function
,object
e desaparecidos. Como lidar com cada caso é definido aquiredux
econnect
eaddDispatchToProps
ao componente simples parece um exagero se eu posso simplesmente passar um para baixo prop. Mas, pelo que eu sei, quase todos os casos demapDispatch
adereços serão opções#1
ou#3
mencionados na resposta99% das vezes, é usado com a
connect()
função React-Redux , como parte domapDispatchToProps
parâmetro. Ele pode ser usado explicitamente dentro damapDispatch
função que você fornece, ou automaticamente se você usar a sintaxe abreviada do objeto e passar um objeto cheio de criadores de ação paraconnect
.A ideia é que, ao pré-vincular os criadores da ação, o componente para o qual você passa
connect()
tecnicamente "não sabe" que está conectado - apenas sabe que precisa ser executadothis.props.someCallback()
. Por outro lado, se você não vinculou criadores de ação e chamouthis.props.dispatch(someActionCreator())
, agora o componente "sabe" que está conectado porque esperaprops.dispatch
que exista.Escrevi algumas reflexões sobre esse tópico em minha postagem do blog Idiomatic Redux: Por que usar criadores de ação? .
fonte
Um exemplo mais completo, passe um objeto cheio de criadores de ação para conectar:
fonte
Vou tentar responder às perguntas originais ...
Componentes inteligentes e burros
Em sua primeira pergunta, você basicamente pergunta por que
bindActionCreators
é necessário em primeiro lugar, e que tipo de componentes não devem estar cientes do Redux.Resumindo, a ideia aqui é que os componentes devem ser divididos em componentes inteligentes (contêiner) e burros (apresentação). Componentes burros funcionam com base na necessidade de saber. Seu trabalho principal é renderizar dados em HTML e nada mais. Eles não devem estar cientes do funcionamento interno do aplicativo. Eles podem ser vistos como a camada frontal profunda de seu aplicativo.
Por outro lado, os componentes inteligentes são uma espécie de cola, que prepara os dados para os componentes burros e, de preferência, não renderiza HTML.
Esse tipo de arquitetura promove um acoplamento fraco entre a camada de interface do usuário e a camada de dados abaixo dela. Isso, por sua vez, permite a fácil substituição de qualquer uma das duas camadas por outra (ou seja, um novo design da IU), o que não quebrará a outra camada.
Para responder à sua pergunta: componentes burros não devem estar cientes do Redux (ou de qualquer detalhe de implementação desnecessário da camada de dados) porque podemos querer substituí-lo por outra coisa no futuro.
Você pode encontrar mais sobre este conceito no manual do Redux e com mais detalhes no artigo Presentational and Container Components de Dan Abramov.
Qual exemplo é melhor
A segunda pergunta era sobre vantagens / desvantagens dos exemplos dados.
No primeiro exemplo, os criadores da ação são definidos em um
actionCreators
arquivo / módulo separado , o que significa que podem ser reutilizados em outro lugar. É basicamente a maneira padrão de definir ações. Eu realmente não vejo nenhuma desvantagem nisso.O segundo exemplo define criadores de ação embutidos, que tem várias desvantagens:
consts
separadamente, de modo que possam ser referenciados em redutores - isso reduziria a chance de erros de digitaçãoO segundo exemplo tem uma vantagem sobre o primeiro - é mais rápido de escrever! Portanto, se você não tem planos maiores para o seu código, pode ser ótimo.
Espero ter conseguido esclarecer um pouco as coisas ...
fonte
Um possível uso de
bindActionCreators()
é "mapear" várias ações juntas como um único objeto.Um envio normal se parece com isto:
Mapeie algumas ações comuns do usuário para adereços.
Em projetos maiores, o mapeamento de cada despacho separadamente pode parecer complicado. Se tivermos um monte de ações relacionadas entre si, podemos combinar essas ações . Por exemplo, um arquivo de ação do usuário que executa todos os tipos de ações diferentes relacionadas ao usuário. Em vez de chamar cada ação como um despacho separado, podemos usar em
bindActionCreators()
vez dedispatch
.Vários despachos usando bindActionCreators ()
Importe todas as suas ações relacionadas. Eles provavelmente estão todos no mesmo arquivo na loja redux
E agora, em vez de usar dispatch, use bindActionCreators ()
Agora posso usar o prop
userAction
para chamar todas as ações em seu componente.IE:
userAction.login()
userAction.editEmail()
outhis.props.userAction.login()
this.props.userAction.editEmail()
.NOTA: Você não precisa mapear o bindActionCreators () para um único prop. (O adicional para o
=> {return {}}
qual mapeiauserAction
). Você também pode usarbindActionCreators()
para mapear todas as ações de um único arquivo como adereços separados. Mas acho que fazer isso pode ser confuso. Prefiro que cada ação ou "grupo de ação" receba um nome explícito. Também gosto de nomear oownProps
para ser mais descritivo sobre o que são esses "adereços infantis" ou de onde vêm. Ao usar Redux + React pode ficar um pouco confuso onde todos os adereços estão sendo fornecidos, então quanto mais descritivo, melhor.fonte
usando
bindActionCreators
, ele pode agrupar várias funções de ação e passá-las para um componente que não reconhece Redux (componente mudo) como talfonte
Também estava procurando saber mais sobre bindActionsCreators e aqui está como eu implementei no meu projeto.
Em seu componente React
fonte
Um bom caso de uso
bindActionCreators
é para integração com redux-saga usando redux-saga-routines . Por exemplo:Observe que esse padrão pode ser implementado usando React Hooks (a partir do React 16.8).
fonte
A declaração docs é muito clara:
Este é claramente um caso de uso que pode surgir nas seguintes e apenas uma condição:
Digamos que temos os componentes A e B:
Injetar para react-redux: (A)
Injetado por react-redux: (B)
Notou o seguinte?
Atualizamos a loja redux por meio do componente A, enquanto não conhecíamos a loja redux no componente B.
Não estamos atualizando no componente A. Para saber exatamente o que quero dizer, você pode explorar este post . Espero que você tenha uma ideia.
fonte