Sinto que nenhuma das respostas se cristalizou por que mapDispatchToProps
é útil.
Na verdade, isso só pode ser respondido no contexto do container-component
padrão, que achei melhor entendido pela primeira leitura: Componentes do contêiner e depois uso com o React .
Em poucas palavras, você components
deve se preocupar apenas em exibir coisas. O único lugar em que eles devem obter informações são seus objetos .
Separado de "exibir coisas" (componentes) está:
- como você exibe as coisas,
- e como você lida com eventos.
É para isso que containers
servem.
Portanto, um "bem projetado" component
no padrão se parece com isso:
class FancyAlerter extends Component {
sendAlert = () => {
this.props.sendTheAlert()
}
render() {
<div>
<h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
<Button onClick={sendAlert}/>
</div>
}
}
Veja como este componente recebe a informação ele exibe a partir de adereços (que veio a partir da loja redux via mapStateToProps
) e também obtém sua função de ação de seus adereços: sendTheAlert()
.
É aí que mapDispatchToProps
entra: no correspondentecontainer
// FancyButtonContainer.js
function mapDispatchToProps(dispatch) {
return({
sendTheAlert: () => {dispatch(ALERT_ACTION)}
})
}
function mapStateToProps(state) {
return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}
export const FancyButtonContainer = connect(
mapStateToProps, mapDispatchToProps)(
FancyAlerter
)
Eu me pergunto se você pode ver, agora que é o container
1 que sabe sobre redux e despacho e armazenamento e estado e ... coisas.
O component
no padrão, FancyAlerter
que faz a renderização não precisa saber nada disso: ele obtém seu método para chamar no onClick
botão, por meio de seus props.
E ... mapDispatchToProps
foram os meios úteis que o redux fornece para permitir que o contêiner passe facilmente essa função para o componente embrulhado em seus adereços.
Tudo isso se parece muito com o exemplo do todo em documentos e outra resposta aqui, mas tentei lançá-lo à luz do padrão para enfatizar o porquê .
(Nota: você não pode usar mapStateToProps
com a mesma finalidade e mapDispatchToProps
pelo motivo básico ao qual não tem acesso dispatch
interno mapStateToProp
. Portanto, não pode usar mapStateToProps
para dar ao componente agrupado um método que usa dispatch
.
Não sei por que eles escolheram dividi-lo em duas funções de mapeamento - poderia ter sido mais organizado ter mapToProps(state, dispatch, props)
uma função do IE para fazer as duas coisas!
1 Observe que eu deliberadamente nomeei explicitamente o contêiner FancyButtonContainer
, para destacar que é uma "coisa" - a identidade (e, portanto, a existência!) Do contêiner como "uma coisa" às vezes se perde na abreviação
export default connect(...)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
sintaxe mostrada na maioria dos exemplos
ALERT_ACTION
a função de ação ou atype
que é retornada da função de ação? : / so baffedÉ basicamente uma abreviação. Então, em vez de ter que escrever:
Você usaria mapDispatchToProps conforme mostrado no seu código de exemplo e, em seguida, gravaria em outro lugar:
ou, mais provavelmente, nesse caso, você teria isso como manipulador de eventos:
Há um vídeo útil de Dan Abramov sobre isso aqui: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist
fonte
mapDispatch
função, o Redux usará um padrão. EssamapDispatch
função padrão simplesmente pega adispatch
referência da função e a fornece comothis.props.dispatch
.mapStateToProps()
é um utilitário que ajuda seu componente a obter o estado atualizado (que é atualizado por alguns outros componentes),mapDispatchToProps()
é um utilitário que ajuda seu componente a disparar um evento de ação (ação de despacho que pode causar alteração no estado do aplicativo)fonte
mapStateToProps
,mapDispatchToProps
econnect
fromreact-redux
library fornece uma maneira conveniente de acessar suas funçõesstate
edispatch
sua loja. Então, basicamente, o connect é um componente de ordem superior, você também pode pensar como invólucro, se isso fizer sentido para você. Portanto, toda vez que vocêstate
alterarmapStateToProps
, será chamado com o novostate
e, posteriormente, à medida que vocêprops
atualizar o componente, executará a função de renderização para renderizar o componente no navegador.mapDispatchToProps
também armazena valores-chave noprops
seu componente, geralmente eles assumem a forma de uma função. Dessa forma, você pode acionarstate
alterações do seu componenteonClick
,onChange
eventos.Dos documentos:
Além disso, verifique se você está familiarizado com as funções sem estado de reagir e com os componentes de ordem superior
fonte
mapStateToProps
recebe ostate
eprops
e permite que você extraia adereços do estado para passar para o componente.mapDispatchToProps
recebedispatch
eprops
e destina-se a vincular criadores de ação a serem despachados, portanto, quando você executa a função resultante, a ação é despachada.Acho que isso só evita que você precise fazer
dispatch(actionCreator())
dentro do seu componente, facilitando a leitura.https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments
fonte
dispatch
método? De onde isso vem?<Provider/>
próprio. Ele faz sua própria mágica de componente de ordem superior para garantir que a expedição esteja disponível nos componentes filhos.Agora, suponha que haja uma ação para redux como:
Quando você o importa,
Como o nome da função diz
mapDispatchToProps()
, mapeie adispatch
ação para adereços (adereços do nosso componente)Portanto, prop
onTodoClick
é uma chave para amapDispatchToProps
função que delega para enviar açõesaddTodo
.Além disso, se você quiser cortar o código e ignorar a implementação manual, poderá fazer isso,
O que exatamente significa
fonte