Estou tentando entender o método de conexão do react-redux e as funções que ele assume como parâmetros. Em particular mapStateToProps()
.
Pelo que entendi, o valor de retorno de mapStateToProps
será um objeto derivado do estado (como ele vive na loja), cujas chaves serão passadas para o componente de destino (o componente ao qual a conexão é aplicada) como acessórios.
Isso significa que o estado consumido pelo seu componente de destino pode ter uma estrutura totalmente diferente do estado em que é armazenado em sua loja.
Q: está tudo bem?
P: Isso é esperado?
Q: Isso é um anti-padrão?
javascript
reactjs
redux
react-redux
Pablo Barría Urenda
fonte
fonte
this.props.someData
em vez dethis.props.someKey[someOtherKey].someData
... faz sentido?Respostas:
Q:
Is this ok?
A: sim
P:
Is this expected?
Sim, isso é esperado (se você estiver usando o react-redux).
P:
Is this an anti-pattern?
R: Não, isso não é um antipadrão.
Chama-se "conectar" seu componente ou "torná-lo inteligente". É por design.
Permite dissociar seu componente do seu estado por um tempo adicional, o que aumenta a modularidade do seu código. Também permite simplificar o estado do componente como um subconjunto do estado do aplicativo, o que, de fato, ajuda a cumprir o padrão Redux.
Pense da seguinte maneira: uma loja deve conter todo o estado do seu aplicativo.
Para aplicativos grandes, isso pode conter dezenas de propriedades aninhadas em várias camadas.
Você não deseja transportar tudo isso a cada ligação (caro).
Sem
mapStateToProps
ou algum análogo, você seria tentado a criar seu estado de outra maneira para melhorar o desempenho / simplificar.fonte
(1) -
acesso mais fácil profunda(2) -
Evitar erros onde um poder mexer componente-se estado que não pertencem a eleSim, está correto. É apenas uma função auxiliar ter uma maneira mais simples de acessar as propriedades do seu estado
Imagine que você tem uma
posts
chave no seu aplicativostate.posts
E componente
Posts
Por padrão
connect()(Posts)
, todos os adereços de estado estarão disponíveis para o Componente conectadoAgora, quando você mapeia o
state.posts
componente, ele fica um pouco melhormapDispatchToProps
normalmente você tem que escrever
dispatch(anActionCreator())
com
bindActionCreators
você pode fazê-lo também mais facilmente comoAgora você pode usá-lo no seu Component
Atualização em actionCreators ..
Um exemplo de um actionCreator:
deletePost
Então,
bindActionCreators
basta executar suas ações, envolvê-las em umadispatch
chamada. (Eu não li o código fonte do redux, mas a implementação pode ser algo como isto:fonte
dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
obtidas as açõesfetchPosts
edeletePost
?state => state.posts
(amapStateToProps
função) dirá ao React quais estados acionarão uma nova renderização do componente quando atualizado.Você acertou a primeira parte:
Sim
mapStateToProps
tem o estado da loja como argumento / parâmetro (fornecido porreact-redux::connect
) e é usado para vincular o componente a determinada parte do estado da loja.Ao vincular, quero dizer que o objeto retornado por
mapStateToProps
será fornecido no momento da construção como adereços e qualquer alteração subsequente estará disponível atravéscomponentWillReceiveProps
.Se você conhece o padrão de design do Observer, é exatamente isso ou uma pequena variação dele.
Um exemplo ajudaria a tornar as coisas mais claras:
Pode haver outro componente de reação chamado
itemsFilters
que manipula a exibição e persiste o estado do filtro no estado Redux Store, o componente Demo está "ouvindo" ou "inscrito" nos filtros de estado do Redux Store, portanto, sempre que os filtros armazenam mudanças de estado (com a ajuda defiltersComponent
) reagem -redux detecta que houve uma alteração e notifica ou "publica" todos os componentes de escuta / inscritos enviando as alterações para seuscomponentWillReceiveProps
quais, neste exemplo, acionam um refiltro dos itens e atualizam a exibição devido ao fato de que o estado de reação foi alterado .Deixe-me saber se o exemplo é confuso ou não é claro o suficiente para fornecer uma explicação melhor.
Quanto a: isso significa que o estado consumido pelo componente de destino pode ter uma estrutura totalmente diferente do estado em que está armazenado em sua loja.
Não recebi a pergunta, mas sei que o estado de reação (
this.setState
) é totalmente diferente do estado da Redux Store!O estado de reação é usado para manipular o redesenho e o comportamento do componente de reação. O estado de reação está contido no componente exclusivamente.
O estado do Redux Store é uma combinação dos estados dos redutores do Redux, sendo cada um responsável por gerenciar uma lógica de aplicativo de pequena parte. Esses atributos redutores podem ser acessados com a ajuda de
react-redux::connect@mapStateToProps
qualquer componente! O que torna o aplicativo Redux Store State acessível em todo o aplicativo, enquanto o estado do componente é exclusivo para si.fonte
Este exemplo de reação e redux é baseado no exemplo de Mohamed Mellouki. Mas valida usando regras de prettify e linting . Observe que definimos nossos props e métodos de despacho usando PropTypes para que nosso compilador não grite conosco. Este exemplo também incluiu algumas linhas de código que estavam faltando no exemplo de Mohamed. Para usar o connect, você precisará importá-lo do react-redux . Este exemplo também vincula o método filterItems, o que evita problemas de escopo no componente . Este código fonte foi formatado automaticamente usando o JavaScript Prettify .
Este código de exemplo é um bom modelo para um ponto de partida para seu componente.
fonte
O React-Redux
connect
é usado para atualizar o armazenamento para todas as ações.É muito simples e claramente explicado neste blog .
Você pode clonar o projeto do github ou copiar e colar o código desse blog para entender o Redux connect.
fonte
Aqui está um esboço / padrão para descrever o comportamento de
mapStateToProps
:(Esta é uma implementação bastante simplificada do que um contêiner Redux faz.)
e a seguir
fonte
}
}
fonte